Hugo是Go语言实现的静态网页生成器，常用来创建和管理博客。写技术博客，在页面中渲染代码是必不可少的需求。Hugo可以支持Server和Client两种方法进行代码的语法高亮处理：
Update@2022 当前版本的Hugo已经使用
Go内置的Chroma进行语法高亮处理。但是以下的旧方案依旧可以使用。
Server方案
使用Pygments在.md文件通过Hugo的shortcodes加入代码。Hugo引擎编译时将其转化为对应的HTML代码。在这里谈两个关于Pygments的使用经验：
Client方案
使用highlightjs在浏览器中进行实时渲染，而在.md文件中直接使用markdown的标准方式“三个`“ 方式来加入代码。
最简单用法如下：
1<link rel="stylesheet" href="https://yandex.st/highlightjs/8.0/styles/default.min.css">
2<script src="https://yandex.st/highlightjs/8.0/highlight.min.js"></script>
3<script>hljs.initHighlightingOnLoad();</script>
使用方法很简单，最核心的还是替换默认theme：
- highlightjs的theme列表在官网Demo中可以找到。
- 如果不想把theme的css下载到本地，推荐使用cdnjs，最新版本9.0的highlightjs所需文件在上面很全
- 替换theme，只需替换上面代码中第一行css为theme对应的css即可
最后关于highlightjs使用中的一个坑是：Hugo本身有很多theme。每个theme对代码段渲染的基本原理相同，都是把代码渲染到pre code中，或者增加highlight class到div上。然而有些theme会画蛇添足的在pre code或者highlight上定义背景色、边框等各种样式，干扰了highlightjs本身的正常渲染效果。比如：hugo-icarus-theme这个Hugo theme会在它的style.css中定义:
1.article-entry pre,
2.article-entry .highlight {
3 background: #34383d;
4 margin: 0 -20px;
5 padding: 15px 20px;
6 border-style: solid;
7 border-color: #eceff2;
8 border-width: 1px 0;
9 overflow: auto;
10 color: #ccc;
11 line-height: 22.400000000000002px;
12}
13.article-entry code {
14 background: #f5f8f9;
15 text-shadow: 0 1px #fff;
16 padding: 0 0.3em;
17}
导致无论选择哪种highlightjs的theme，渲染后背景都是#34383d，同时有个很ugly的外边框（如下图）
这个只有修改theme的css
1.article-entry pre,
2.article-entry .highlight {
3 margin: 0 -20px;
4 padding: 15px 20px;
5 overflow: auto;
6 color: #ccc;
7 line-height: 22.400000000000002px;
8}
9.article-entry code {
10 text-shadow: 0 1px #fff;
11 padding: 0 0.3em;
12}
修改后的效果
