背景

PaperMod 主题默认使用的是 highlight.js, 这是一种由 js 生成的高亮方案。相比 highlight.js, Hugo 官方更倾向使用 Chroma 来生成代码高亮。

Chroma 是由 Go 写的语法高亮工具，其编译速度更快，且 Hugo 内置了 Chroma 工具。Hugo 关于 Chroma 的文档在 Syntax Highlighting

禁用 Highlight.js

highlight.js 与 Chroma 的样式是冲突的。

按照 FAQs 提到的方案，我们首先需要通过 params.assets.disableHLJS 禁用 Highlight.js. 具体配置为：

1
2
3

params:
  assets:
    disableHLJS: true

高亮配置

在项目根目录下面找到配置文件 config.yml，增加以下配置:

1
2
3
4
5
6
7

markup:
  highlight:
    codeFences: true
    guessSyntax: true
    lineNos: true
    noClasses: false
    style: monokai

其中，lineNos的含义为是否显示行号，一般建议开启。noClasses这个配置项的含义并不那么清晰，在查阅了资料后得知：生成代码高亮有两种方式，一种是直接在代码块上进行样式内联，第二种就是在代码块上面增加 CSS 类。该配置项的意思是说是否不生成 CSS 类，即直接嵌套 CSS 内联样式。

显然，使用 CSS 类后，生成的 HTML 会更加简短、美观。所以在这里我就设置为了 false.

设置 false 意味着，本来他在把样式直接写到 HTML 中，但你关闭了这个功能，那么就需要你自己生成代码高亮的样式。

生成 CSS 类

1

hugo gen chromastyles --style="dracula"  > assets/css/extended/chroma.css

通过 hugo gen 命令可以生成 Chroma 的样式，在 PaperMod Wiki 中也有提到，凡是在 assets/css/extended 下的 css 文件，都会被自动加载。具体描述参考 FAQs

Hugo 支持的代码高亮样式可以[点击这里](Chroma Style Gallery)

覆盖系统样式

至此，Chroma 的样式其实已经生成好了，按理说应该不会有问题才对。事实上，这里有一个比较坑的地方在于，PaperMod 将代码块的背景颜色写死了。这意味着不管你使用什么样式的高亮代码，生成的代码的背景颜色都会被系统配置所覆盖。

为了解决这个问题，我们需要 unset 掉 hljs-bg 这个变量。

在 assets/css/extend/custom.css 中添加以下样式：

1
2
3
4
5
6

:root {
    --hljs-bg: unset;
}
.dark {
    --hljs-bg: unset;
}

这样系统默认的样式就被清理掉，页面上显示的就是通过 hugo gen生成的配色。