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-numbers
CSS 类,这样在写作时就可以直接使用 Markdown 的代码块标记,而不用写入多余的 HTML 代码:
$(document).ready(function(){
$("pre[class*='language-'],code[class*='language-']").addClass('line-numbers');
});
麻烦问下楼主,这个仿 Mac 的风格怎么弄的
这个风格由 highlightjs.org 提供支持,风格选择 xcode 即可。