博客养成记 (3) – 为 Hugo 添加 PrismJs 语法高亮支持

Prism.js 是一个轻量级、扩展性强的语法高亮插件。

为什么不使用 Hugo 自带的语法高亮

Hugo 官方文档给出了详细的语法高亮配置方法，它使用的是 Golang 语言实现的语法高亮器 Chroma。通过 shortcode 就可以为代码添加语法支持。比如要标注一段 HTMl 代码，需要像下面这样使用：

 {{</* highlight html */>}}
 // ...html code
 {{</* / highlight */>}}

虽然使用方法上并没有多复杂，但是比较繁琐，而且使用 Mrakdown 写作时我并不希望引入太多非 Markdown 原生的语法，我更希望的是像下面这样直接使用 Markdown 原生的代码块语法就可以自动支持语法高亮：

```html
// ...html code
 ```

使用 Prism.js

Prism.js 这个插件使用简单，支持定制化，支持高亮的语言（截至目前 199 种）也很多。引入 prism.js 后会自动对页面的代码块进行标注，从而利用 prism.css 达到高亮显示代码块的效果。可以通过本地引用或者 CDN 引用 PrismJs。

本地引用

下载以及使用方法在 PrismJs 官网都可以查询到。在 PrismJs 的下载页面我们可以选择主题样式、支持的语言以及要包含的插件，并生成最小化的 CSS 与 JS 文件，下载到本地并引用即可：

<!DOCTYPE html>
 <html>
 <head>
     ...
     <link href="themes/prism.css" rel="stylesheet" />
 </head>
 <body>
     ...
     <script src="prism.js"></script>
 </body>
 </html>

在 Hugo 中使用可以参考我的做法：

1、将下载的 css 和 js 放到资源目录。

/static/plugins/prism/prism.css
/static/plugins/prism/prism.js

2、在配置文件 params.toml 中设置路径。

[prism]
    js="plugins/prism/prism.js"
    css="plugins/prism/prism.css"

3、在页面模板中引用路径。

 // <head>
 {{ range .Site.Params.prism.css -}}
 <link rel="stylesheet" href="{{ . | relURL }}">
 {- end }}
 
 // <body>
 {{ range .Site.Params.prism.js -}}
 <script src="{{ . | relURL }}"></script>
 {{- end }}

4、在文章中使用。

（1）使用 Markdown 原生的 “` 代码块标记将需要高亮的代码包起来：

```html
// my code
```

（2）也可以使用 html 语法：

<pre><code class="language-html">my code</code></pre>

需要注意的是，PrismJS 只会标注那些带有 language-xxxx 或 lang-xxxx css 类的 <code> 代码块。

CDN 引用

如果网站面向中国用户，可以用 BootCDN 提供的 Prism 库，面向国外用户则可以用 jsDelivr 提供的 Prism 库。以 BootCDN 提供的 prism1.17.1 版本为例，引用方法如下：

// <head>
<link href="https://cdn.bootcss.com/prism/1.17.1/themes/prism-tomorrow.min.css" rel="stylesheet">
 
// <body>
<script defer src="https://cdn.bootcss.com/prism/1.17.1/components/prism-core.min.js"></script>
<script defer src="https://cdn.bootcss.com/prism/1.17.1/plugins/autoloader/prism-autoloader.min.js" onload="Prism.plugins.autoloader.languages_path='https://cdn.bootcss.com/prism/1.17.1/components/'"></script>

CDN 引用除了 prism css 和 prism core js 外，还要引入一个 autoloader js，其作用是按需加载语言高亮样式。autoloader js 要在 prism css 和 prism core js 加载后再执行，否则会报错。因此这里我们可以利用 onload 方法，确保 autoloader js 在所有资源载入完成后才触发。在引入 js 时，defer 关键字的作用是声明该资源留待最后才加载。

Prism 主题

官网提供了 8 种高亮主题，更多的 PrismJs 主题可以到 prism-themes 下载。

显示代码行号

（1）引入：在官网下载 Prism 时勾选 Line Numbers Plugins，或者通过 CDN 引入 prism-line-numbers.min.css 和 prism-line-numbers.min.js 。

（2）使用：引入 line-numbers 插件后，只要在 HTML 的 <pre> 标签中加入 line-numbers CSS 类就可以实现行号显示效果。

笨拙一点的用法如下：

<pre class="line-numbers"><code class="language-html">your_code</code></pre>

我的做法是通过 JS 为页面所有符合条件的 <pre> 标签加上 line-numbersCSS 类，这样在写作时就可以直接使用 Markdown 的代码块标记，而不用写入多余的 HTML 代码：

$(document).ready(function(){
     $("pre[class*='language-'],code[class*='language-']").addClass('line-numbers');
 });

链接汇总

PrismJs 官网

PrismJs CDN

PrismJs 主题