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.js
、prism.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
(无语言)。