在Jekyll中使用highlight.js

最近想把网站的代码高亮从Jekyll默认的Rouge换成highlight.js，本来以为会很麻烦，没想到简单搜索了一下却发现其实只需要短短几步

禁用Rouge

在_config.yml里添加以下代码

markdown: kramdown
kramdown:
  syntax_highlighter_opts:
    disable: true

引入highlight.js

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>

启用highlight.js
```
hljs.initHighlightingOnLoad();
```

highlight.js默认会高亮所有<pre><code>...</code></pre>标签内的代码，正好kramdown也会把代码块里的代码放在<pre><code>...</code></pre>里面，所以不需要特别配置。不过inline代码外面就只有<code>...</code>标签，所以如果想要高亮inline代码的话，就不能用直接用默认配置启动了。

修改highlight.js的启动代码：

hljs.initHighlightingOnLoad()相当于以下代码：

document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('pre code').forEach((block) => {
    hljs.highlightBlock(block);
  });
});

要高亮inline代码的，需要把hljs.initHighlightingOnLoad()改为：

document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('code').forEach((code) => {
    hljs.highlightBlock(code);
  });
});

添加css代码
hljs.highlightBlock(code);会给<code>标签添加.hljs，这个css类会让<code>以block显示：
```
.hljs {
    display:block;
    // ...
}
```
添加以下css，让inline代码行内显示：
```
pre code.hljs {
  display: block;
}
   
code.hljs {
  display: inline;
}
```

值得一提的是，highlight.js是通过<code class="javascript">中的class确定代码语言的，如果简单的写两个反引号的话（如`some codes`），因为没有相关的CSS类，highlight.js就只能靠猜了。好在kramdown可以用这种写法指定语言：

`Redcarpet.new("Hello World!")`{:.ruby}

如果你用的是pandoc的话，那就是

`Redcarpet.new("Hello World!")`{.ruby}

完工！ ⤧ Previous post 给静态博客添加页面切换效果