自定义 Hexo 代码高亮

对于 hexo 默认的代码高亮插件 highlight.js
的配色方案我不太喜欢,然后 gg 了一下,总算找到了一种不错的方案,其中用到了 prism.js
这个代码高亮的插件,特此记录一下具体配置方案。
禁用 highlight.js
修改 _config.yml
配置文件
1 | highlight: |
下载 prism.js 配置文件
个人配置 选择 theme
,这里我用 Okaidia
,然后是 language
和 plugin
;最后下载 js 和 css 文件,默认就是 prism.js
和 prism.css
,如果不是建议重命名,然后将其直接放置在如下路径,或者也可以在其中一个目录下新建 prism
文件,将 js 和 css 文件放入。
1 | blog\themes\cactus\source\js |
配置 prism.js
- 在
blog\themes\cactus\layout\_partial\head.ejs
尾部添加以下代码:1
<link rel="stylesheet" href="/css/prism.css">
- 在
blog\themes\cactus\layout\_partial\footer.ejs
尾部添加以下代码:如果你选择了1
<script src="/js/prism.js" async></script>
Copy to Clipboard Button
插件,则可能还需下载 clipboard.min.js,因为这个插件需要使用clipboard.min.js
里面的函数,不过 hexo 很多主题都自带了,放在blog\themes\cactus\source\lib\clipboard
里,此间可以将clipboard.min.js
放到之前新建的prism
文件下,或者直接在footer.swig
文件末尾添加修改路径。1
<script src="/lib/clipboad/clipboard.min.js"></script>
- 修改
blog\node_modules\marked\lib\marked.js
,搜索<pre><code class="
关键字(应该只有一处),将这行语句改为如下代码,其中如果你下载的prism.js
未选择Line Numbers
插件,则去掉line-numbers
,注意后面还有个空格,也要去掉。上面的方法是 prism.js 官网里提到的,第三步相当 hack,有位老哥研究了源码发现没必要改1
return '<pre><code class="line-numbers language-'
marked
,又提出了一个更简单的方法:因为 hexo 在封装marked
的时候一步步把配置往外暴露了出来,最关键的是在hexo-renderer-marked
里面,把配置暴露给了 hexo 配置:所以最终的解决就是在站点1
2
3
4
5
6
7
8
9
10
11hexo.config.marked = assign({
gfm: true,
pedantic: false,
sanitize: false,
tables: true,
breaks: true,
smartLists: true,
smartypants: true,
modifyAnchors: '',
autolink: true
}, hexo.config.marked);_config.yml
添加如下配置就好:1
2marked:
langPrefix: language-测试 prism.js
在站点根目录,runhexo g
,然后本地查看效果。比较麻烦的一点是,改用prism.js
后,代码块必须指定一个语言,如果当前代码块没有合适的 language,可以将其语言指定为 none。这一点,个人认为在 markdown 语法中是个不错的习惯。
Reference: https://zfl9.github.io/hexo-code.html
Comments