hexo 代码高亮

hexo 默认的代码高亮插件为 highlight.js,highlight.js 的代码高亮个人感觉不是很好看(主要是配色方面,感觉不够“高亮”),然后偶然之间发现了一个还不错的代码高亮插件:prism.js,所以就琢磨着如何将 hexo 的 highlight.js 替换为 prism.js。

禁用 highlight.js

修改站点根目录下的 _config.yml 配置文件,具体如下:

highlight:
  enable: false
  line_number: false
  auto_detect: false
  tab_replace:

获取 prism.js

下载页面:https://prismjs.com/download.html;选择 theme 主题、language 支持的语言(不要选太多,够用就好)、plugin 插件;然后点击下载按钮就行了;下载到本地之后,将它们重命名为 prism.jsprism.css,然后将它们放置到 $HEXO/themes/next/source/js/prism/ 目录下(prism 文件夹需要自己新建),即它们的路径分别是:

/themes/next/source/js/prism/prism.js
/themes/next/source/js/prism/prism.css

配置 prism.js

1、修改 $HEXO/themes/next/layout/_partials/head.swig,在尾部添加以下代码:

<link rel="stylesheet" href="/js/prism/prism.css">

2、修改 $HEXO/themes/next/layout/_partials/footer.swig,在尾部添加以下代码:

<script src="/js/prism/prism.js" async></script>

如果你选择了 Copy to Clipboard Button prism.js 插件,则还需下载 clipboard.js,因为这个插件需要使用 clipboard.js 里面的函数,如果不这样做,在 Chrome 浏览器中将无法正常显示代码块,将 clipboard.js 放到 $HEXO/themes/next/source/js/prism/ 目录下,然后在 footer.swig 文件末尾添加这两行(上面的第 2 步不要执行):

<script src="/js/prism/clipboard.js"></script>
<script src="/js/prism/prism.js" async></script>

3、修改 $HEXO/node_modules/marked/lib/marked.js,搜索 <pre><code class=" 关键字(应该只有一处),该行的内容为:

return '<pre><code class="'

将这行语句改为:如果你下载的 prism.js 未选择 Line Numbers 插件,则去掉 line-numbers(注意后面还有个空格,也要去掉):

return '<pre><code class="line-numbers language-'

测试 prism.js

进入站点根目录,执行 hexo c && hexo g 命令(删掉原来的缓存文件,然后重新生成静态 html 页面),然后打开浏览器查看效果。注意,改用 prism.js 后,代码块必须指定一个语言,如 ```html,如果当前代码块没有合适的 language,可以将其语言指定为 none,即 ```none(无语言)。