在代码围栏的降价中添加 class 的正确方法是什么

What is the right way to add class in markdown on code fences

我的用例专门针对 PrismJS,它需要代码标记中的某些 classes 来获得一些额外的代码突出显示功能,例如 line-numbers 以显示行号,match-braces 以突出显示匹配的大括号等。 我在我的博客中使用 HUGO,在 markdown 文件中,我可以使用以下语法显示一些突出显示的代码块:

```js
  console.log('Hello World!');
```

我搜索了很多但找不到将 class 添加到代码围栏的正确方法,如上所示,所以我这样做:

```js line-numbers match-braces
  console.log('Hello World!');
```

这确实有效,但是在使用代码栅栏时在 markdown 中添加 classes 的正确方法是什么?

what is the right way to add classes in markdown when using code fences?

无论哪种 hack 恰好适用于您正在使用的实现。

首先,围栏代码块只是部分标准化。它们不在 original rules. However, they were more recently added to the Commonmark spec 中,它只提供了一个单一的 class 来指定一种语言。除此之外,规范规定:

An info string can be provided after the opening code fence. Although this spec doesn’t mandate any particular treatment of the info string, the first word is typically used to specify the language of the code block. In HTML output, the language is normally indicated by adding a class to the code element consisting of language- followed by the language name.

规范中的一个 example 显示正在定义多个项目:

~~~~    ruby startline=3 $%@#$

但是,在输出中只有第一个单词幸存下来。其他一切都丢失了。

<pre><code class="language-ruby">

如上所述,围栏代码块是最近添加到 Commonmark 规范中的内容。在指定它们之前,大多数实现已经在不同程度上支持它们。因此,第一个词以外的任何内容的处理方式都有很多种。您需要查看您正在使用的特定实现的文档。

当你用 [hugo] 标记它时,我检查了 Hugo's documentation, which examples suggests that only a single word is supported for language identification. Hugo's documentation also states that they use Goldmark 在引擎盖下进行 Markdown 解析。 Goldmark 将自己标记为“standards-compliant”Commonmark 实现,这表明它将按照规范中记录的方式运行。但是,它确实支持第三方扩展。有人总是可以创建一个扩展来支持围栏代码块的信息字符串中的更多功能。

在第三方扩展之外,您将需要借助黑客技术来诱使解析器将多个 classes 视为一个单词。