如何在 Markdown 中设置 HTML 类属性？

Posted 2023-02-19

【中文标题】如何在 Markdown 中设置 HTML 类属性？

【英文标题】：How do I set an HTML class attribute in Markdown?

【发布时间】：2010-11-01 19:04:14

【问题描述】：

如果我有一些 Markdown 之类的

## My Title

A paragraph of content here.

    code_line(1);
    // a code comment
    class MoreCode  

and more text to follow...

如何在中间生成的<code> 块上设置一个类？我想让它输出

<code class=’prettyprint’>
  code_line(1);
  // a code comment
  class More Code  
</code>

但我似乎无法设置它。我确实没有可以控制正在运行的 Markdown 代码，只能控制内容。

【参考方案1】：

您可以embed html in Markdown。按字面意思输入您想要的内容，不要缩进。

<code class="prettyprint">
  code_line(1);
  // a code comment
  class More Code  
</code>

对于 syntax highlighting 的特定情况，在受保护的代码块开头的反勾号之后，该语言现在几乎无处不在。

```js
code_line(1);
// a code comment
class MoreCode  
```

【讨论】：

唉，我怀疑这是唯一的选择。很高兴得到一些确认。

【参考方案2】：

Markdown 有一个扩展名 (attr_list.py)，它允许您使用 Maruku 的 : .classname 语法。

【讨论】：

谢谢。如果您包含一些链接，那将是更好的答案。

【参考方案3】：

Markdown Extra 支持使用花括号的 class 和 id 属性。见：https://michelf.ca/projects/php-markdown/extra/#spe-attr

【讨论】：

如果您在 JS 环境中，也可以在 markdown-it-attrs 中使用

【参考方案4】：

虽然没有准确回答问题。您也可以使用不同的渲染器，例如 Maruku 或 Kramdown：

## My Title

A paragraph of content here.
~~~
code_line(1);
// a code comment
class MoreCode  
~~~
: .prettyprint

and more text to follow...

输出（用 haml 和 kramdown 测试）：

<pre class="prettyprint"><code>
code_line(1);
// a code comment
class MoreCode  
</code></pre>

Kramdown 语法：http://kramdown.rubyforge.org/quickref.html#block-attributes

【讨论】：

+1 用于 Multimarkdown 和 Kramdown。定义列表、表格等等：-)

请注意，Kramdown 是 Jekyll 中的默认解析器，因此如果 Jekyll 是您的静态站点构建器，您无需安装任何东西即可开始使用它。