在 hexo-theme-fluid 使用 prismjs 语法高亮
为啥
highlight.js 固然更受欢迎,不过在 hexo-theme-fluid 载入的效果不是很好,对于某些语言的高亮有点糟糕。
那就换 prismjs 苟一下吧,等作者修好再说。
配置
在 _config.fluid.yml
中修改代码高亮的字段。
行号暂时想不到怎么对齐,只能关掉了。
# _config.fluid.yml
highlight:
enable: true
# 代码块是否显示行号
# If true, the code block display line numbers
- line_number: true
+ line_number: false
# 实现高亮的库,对应下面的设置
# Highlight library
# Options: highlightjs | prismjs
- lib: "highlightjs"
+ lib: "prismjs"
然后自行选择高亮的 style.
生成方式尽量还是选 js 吧。
# _config.fluid.yml
prismjs:
# 在下方链接页面右侧的圆形按钮挑选 style 填入,也可以直接填入 css 链接
# Select the style button on the right side of the link page, you can also set the CSS link
# See: https://prismjs.com/
style: "tomorrow-night"
# 设为 true 高亮将本地静态生成(并只支持部分 prismjs 插件),设为 false 高亮将在浏览器通过 js 生成
# If true, it will be generated locally (but some prismjs plugins are not supported). If false, it will be generated via JS in the browser
preprocess: false
魔改
某次上线自行欣赏的时候,发现代码块和段落的间距不大对。
之前没出现过,应该是 prismjs 的问题。
对照了 highlight.js 生成的页面,发现是 figure
元素的作用。
那就在渲染高亮的代码里面修一下,在返回的内容外面包裹一下就好。
修改 node_modules/hexo-theme-fluid/scripts/events/lib/highlight.js
// node_modules/hexo-theme-fluid/scripts/events/lib/highlight.js
hexo.extend.filter.register('after_post_render', (page) => {
page.content = page.content.replace(/(?<!<div class="code-wrapper">)(<pre.+?<\/pre>)/gims, (str, p1) => {
if (/<code[^>]+?mermaid[^>]+?>/ims.test(p1)) {
str = str.replace(/<pre[^>]*?>/gims, '<pre>')
.replace(/(class=".*?)language-mermaid(.*?")/gims, '$1mermaid$2');
if (hexo.config.highlight.line_number) {
str = str.replace(/<span.+?line-numbers-rows.+?>.+?<\/span><\/code>/, '</code>');
}
return str;
}
- return `<div class="code-wrapper">${p1}</div>`;
+ return `<figure><div class="code-wrapper">${p1}</div></figure>`;
});
page.content = page.content.replace(/<pre><code>/gims, (str) => {
return '<pre class="language-none"><code class="language-none">';
});
return page;
});
保存修改
对付 node_modules
这种黑洞,可以在外面创建一个副本。
然后用脚本作为构建命令,先覆盖,再构建。
All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.
Comment