我可以使用 Markdown 在段落上定义类名吗？

Posted 2023-02-19

【中文标题】我可以使用 Markdown 在段落上定义类名吗？

【英文标题】：Can I define a class name on paragraph using Markdown?

【发布时间】：2010-11-06 17:36:06

【问题描述】：

如果有，怎么做？

【问题讨论】：

我不知道有更精确的方法来询问“”你忘了看标题吗？

[偏见] 如果您恰好是 Node 用户，请查看Rho。尽管它不是 100% 与 Markdown 兼容，但您可能仍然觉得它非常有吸引力，因为它的核心具有您需要的功能。

【参考方案1】：

骗子：How do I set an html class attribute in Markdown?

---

本地？不，但是……

不，Markdown 的语法不能。你可以通过 Markdown Extra 来set ID values。

如果您愿意，可以use regular HTML，并添加属性markdown="1" 以继续在HTML 元素中进行降价转换。这需要Markdown Extra。

<p class='specialParagraph' markdown='1'>
**Another paragraph** which allows *Markdown* within it.
</p>

可能的解决方案：（未经测试，适用于<blockquote>）

我在网上找到了以下内容：

功能

function _DoBlockQuotes_callback($matches) 

    ...cut...

    //add id and class details...
    $id = $class = '';
    if(preg_match_all('/\(?:([#.][-_:a-zA-Z0-9 ]+)+)\/',$bq,$matches)) 
        foreach ($matches[1] as $match) 
            if($match[0]=='#') $type = 'id';
            else $type = 'class';
            $$type = ' '.$type.'="'.trim($match,'.# ').'"';
        
        foreach ($matches[0] as $match) 
            $bq = str_replace($match,'',$bq);
        
    

    return _HashBlock(
        "<blockquote$id$class>\n$bq\n</blockquote>"
    ) . "\n\n";

降价

>.className#idThis is the blockquote

结果

<blockquote id="id" class="className">
    <p>This is the blockquote</p>
</blockquote>

【讨论】：

（用 MaRuKu 解析器测试）你可以在一行文本的开头使用“.class-name”来影响 P 标签。但是，id 部分被忽略了。

【参考方案2】：

原始 HTML 在 Markdown 中实际上是完全有效的。例如：

Normal *markdown* paragraph.

<p class="myclass">This paragraph has a class "myclass"</p>

只要确保 HTML 不在代码块内即可。

【讨论】：

这种方式的问题是内部文本不再是markdown了。

@akauppi 是的；不过，这可以通过使用 span 标签来解决。

@Seraphendipity 不在我的 MD 编辑器上。我想这取决于编辑器

【参考方案3】：

如果您的环境是 javascript，请使用 markdown-it 和插件 markdown-it-attrs：

const md = require('markdown-it')();
const attrs = require('markdown-it-attrs');
md.use(attrs);

const src = 'paragraph .className #id and=attributes';

// render
let res = md.render(src);
console.log(res);

输出

<p class="className" id="id" and="attributes">paragraph</p>

jsfiddle

注意：在 Markdown 中允许使用属性时，请注意安全方面！

免责声明，我是markdown-it-attrs的作者。

【讨论】：

Markdown It Rocks!!

【参考方案4】：

如果你的 markdown 风格是 kramdown，那么你可以像这样设置 css 类：

:.nameofclass
paragraph is here

然后在你的css文件中，你像这样设置css：

.nameofclass
   color: #000;
  

【参考方案5】：

Markdown应该有这个能力，但它没有。相反，您会遇到特定语言的 Markdown 超集：

PHP： Markdown ExtraRuby： Kramdown, Maruku

但是如果你需要遵守真正的 Markdown 语法，你就会被插入原始 HTML 所困，这不太理想。

【参考方案6】：

这是遵循@Yarin 的回答的 kramdown 的工作示例。

A simple paragraph with a class attribute.
:.yourClass

参考：https://kramdown.gettalong.org/syntax.html#inline-attribute-lists

【讨论】：

我对此一无所知。与使用内置 Python Markdown 解析器的 Markdown Preview (Sublime 3) 配合得很好。

【参考方案7】：

如上所述，降价本身会让您坚持下去。但是，根据实施情况，有一些解决方法：

至少有一个版本的 MD 认为 <div> 是块级标签，但 <DIV> 只是文本。但是，所有浏览器都不区分大小写。这允许您保持 MD 的语法简单性，但代价是添加 div 容器标签。

所以以下是一种解决方法：

<DIV class=foo>

  Paragraphs here inherit class foo from above.

</div>

这样做的缺点是输出代码有 <p> 标记包裹 <div> 行（两者，第一个是因为它不匹配，第二个是因为它不匹配。没有浏览器对此大惊小怪，我'已经找到，但代码不会验证。无论如何，MD 倾向于放入备用的<p> 标签。

markdown 的几个版本实现了约定<tag markdown="1">，在这种情况下，MD 将在标签内进行正常处理。上面的例子变成：

<div markdown="1" class=foo>

  Paragraphs here inherit class foo from above.

</div>

如果使用引用的链接，当前版本的 Fletcher MultiMarkdown 允许属性跟随链接。

【讨论】：

注意：请务必使用代码标记；这篇文章的大部分内容都被隐藏了，因为它被解释为 HTML 标签。

谢谢 - DIV hack 是这里唯一似乎适用于 pegdown / cegdown 的答案。 （Pegdown 也可以通过插件进行扩展，所以从长远来看，我可能会这样做）

【参考方案8】：

在 slim markdown 中使用：

markdown:
  :.cool-heading
  #Some Title

翻译为：

<h1 class="cool-heading">Some Title</h1>

【参考方案9】：

还应该提到<span> 标签允许在它们内部——块级项目在它们内部本地否定 MD，除非您将它们配置为不这样做，但内联样式本身允许在它们内部使用 MD。因此，我经常做类似...

This is a superfluous paragraph thing.

<span class="class-red">And thus I delve into my topic, Lorem ipsum lollipop bubblegum.</span>

And thus with that I conclude.

我不能 100% 确定这是否是通用的，但似乎在我使用过的所有 MD 编辑器中都是如此。

【参考方案10】：

如果您只需要一个用于 Javascript 的选择器（就像我一样），您可能只想使用 href 属性而不是 class 或 id：

这样做：

<a href="#foo">Link</a>

Markdown 不会像处理类和 id 一样忽略或删除 href 属性。

所以在你的 Javascript 或 jQuery 中你可以这样做：

$('a[href$="foo"]').click(function(event) 

    ... do your thing ...

    event.preventDefault();
);

至少这在我的 Markdown 版本中有效......