如何在Markdown代码块中正确添加类？（适配PrismJS与Hugo）

我之前在Hugo博客里配置PrismJS代码高亮时，也纠结过这个问题！你当前用的在语言标识后加空格和类名的方式其实是可行的，但Hugo提供了更规范、易维护的两种方案，分享给你：

1. 官方推荐：代码块属性语法（Code Block Attributes） #

这是Hugo支持的标准扩展语法，语法清晰且兼容性更好。你只需要在代码块开头的反引号后，先写语言，再用大括号包裹带.前缀的类名，多个类用空格分隔：

console.log('Hello World!');

生成的HTML会自动给<code>标签加上对应的class：

<pre><code class="language-js line-numbers match-braces">console.log('Hello World!');</code></pre>

这种写法完全符合Hugo的设计规范，不会和语言名混淆，也方便后续维护。

2. 更灵活的自定义短代码（Shortcode） #

如果需要对代码块进行更复杂的控制（比如默认给所有代码块加固定类、添加Prism需要的data-*属性等），可以自定义一个短代码：

1. 在你的Hugo项目中创建layouts/shortcodes/code.html文件，内容如下：

<pre><code class="language-{{ .Get 0 }} {{ with .Get 1 }}{{ . }}{{ end }}" {{ with .Get 2 }}{{ . }}{{ end }}>
  {{ .Inner | safeHTML }}
</code></pre>

2. 在Markdown中使用这个短代码：

{{< code js "line-numbers match-braces" "data-prismjs-copy=true" >}}
console.log('Hello World!');
{{< /code >}}

这种方式适合需要全局统一配置或者添加额外属性的场景，扩展性更强。

补充说明 #

你当前使用的```js line-numbers match-braces写法，其实是Hugo早期支持的“后缀类名”写法，虽然能正常工作，但官方现在更推荐第一种大括号属性的写法，因为可读性更高，也和CommonMark的扩展标准更契合。

另外要注意：不管用哪种方式，都要确保你已经正确引入了PrismJS对应的插件脚本和样式文件（比如prism-line-numbers.min.js、prism-line-numbers.min.css），否则添加了类也不会生效哦。

内容的提问来源于stack exchange，提问作者Encrypter