方式一:修改config.toml(推荐)

在config.toml中开启highlight.js

[params]
syntaxHighlighter = "highlight.js"
customCSS = ["https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-light.min.css"]

其中customCSS指定的是highlight的style名称,如果不设置,则会使用highlight.js的默认style。

这种方式需要hugo的theme提供highlight.js支持,hugo默认theme不支持这种方式。已知的支持highlight.js的hugo theme:https://github.com/kakawait/hugo-tranquilpeak-theme

方式二:修改header.html

在theme的./layouts/partials或者./layouts/chrome/目录下,找到header.html或者header.includes.html文件,然后再在<header>标签内添加cdn地址:

<link rel="stylesheet"
  href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

highlight.js的最新cdn地址获取
https://highlightjs.org/download/

如果要修改style,直接修改default.min.css的名字,比如想使用vs风格,那么就将

href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"

修改为

href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/vs.min.css"

上述两种方式设置后,hugo文章模板中的所有代码都会统一替换为highlight.js风格,不用在修改原有的.md文件。

highlight.js style演示合集

https://highlightjs.org/static/demo/

Hugo highlight语法:Syntax Highlighting

https://bwaycer.github.io/hugo_tutorial.hugo/extras/highlighting/#highlight-js-example


胡者,天之骄子也。----《汉书》