hexo 上使用highlight.js代码高亮

文章发布时间:

最后更新时间:

Hexo 自带了在渲染网页时进行代码高亮的功能

然鹅本站使用的theme: Shen-Yu/hexo-theme-ayer本身不含有代码高亮且与hexo默认的代码高亮不兼容，顾使用 highlight.js 来进行代码高亮～

首先要把 Hexo 和 Material Theme 自带的高亮关掉(。・`ω´・)

打开根目录下的_config.yml文件：

1
2
3
4
5
6
# Writing
highlight:
  enable: false
  line_number: false
  auto_detect: false
  tab_replace:

然后需要在theme里面引入 highlight.js 的本体和启用初始化方法( つ•̀ω•́)つ

以Shen-Yu/hexo-theme-ayer为例:

在\themes\ayer\layout\_partial\head.ejs文件的<head>DOM里增加：

1
2
3
4
5
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/styles/vs2015.min.css"><!- highlight.js ->
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/highlight.min.js"></script>
<script>
  hljs.initHighlightingOnLoad();
</script>

参考

≡