给网站添加代码高亮，不仅大大提高代码的阅读效率，还能根据网站风格选择合适的配色方案，提高整个网站的颜值。

下载安装 highlight.js

从官网选择需要的语言后下载文件。解压压缩包，在页面中引入自己选择风格对应的「CSS 文件」和highlight.pack.js。

<!-- head -->
<link rel="stylesheet" href="/css/highlight.css"/>

<!-- body -->
<script src="/js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

文件引入路径根据项目不同进行相应改动。

在线 cdn 资源安装

除了下载引用外，还可直接调取官方提供的在线 CDN 资源。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/highlight.min.js"></script>

使用方法

在完成上述安装操作后，在需要高亮的代码上添加「语言类型标签」，支持的语言查询。

<pre><code class="html">...</code></pre>

需要禁用高亮可使用 plaintext 或 nohighlight 标签。

<pre><code class="plaintext">...</code></pre>
<pre><code class="nohighlight">...</code></pre>

Hugo 自带代码高亮

打开根目录下的 config.yaml，添加以下条目即可使用 Hugo 预制高亮效果。

pygmentsUseClasses: false

如果想使用更多其他风格的效果可使用上述方案安装第三方的 highlight.js 插件，安装后会自动识别代码语言类型并输出对应的配色方案，你也可以在「Code」符号后指定语言。

 ```html
 <div>XXXXX</div>
 ...

 ```css
 a {
  text-decoration: none;
 }
 ...