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.js2、在配置文件 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-xxxxcss类的<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');
});
