Hugo添加Prism代码高亮
Hugo自带的Chroma代码高亮不是很方便, 还是请出Prism.
下载js和css文件
在PrismJS官网DIY自己需要的主题, 语言以及其他插件如行号.
将js和css文件放到对应目录下
- ./static/css/prism.css
- ./static/js/prism.js
在页面模板文件中添加js和css引用
- 新建默认基础模板文件(./layouts/_default/baseof.html)
- 将主题中的基础模板文件内容(./themes/theme_name/layouts/_default/baseof.html)拷贝到新文件中
- 在head字段尾部加入自定义css, 在body字段尾部加入自定义js
<head>
{{ range .Site.Params.customCSS -}}
<link rel="stylesheet" href="{{ . | relURL }}">
{- end }}
</head>
<body>
{{ range .Site.Params.customJS -}}
<script src="{{ . | relURL }}"></script>
{{- end }}
</body>
配置文件中添加自定义js和css参数
在config.toml中添加如下参数, 并设置好js和css文件路径.
[Params]
customCSS = ["css/prism.css"] # Include custom CSS files
customJS = ["js/prism.js"] # Include custom JS files
文章中代码高亮格式
Markdown文件中既可以使用```块标记来调用Prism高亮, 同时也可以使用Prism自己的格式.
- line-numbers 表示添加行号
- language-html 设置语言种类
<pre class="line-numbers"><code class="language-html">your_code</code></pre>