2.6 KiB
2.6 KiB
Hexo-Highlight-Shiki
English丨简体中文
一个使用 Shiki 作为代码块高亮器的 Hexo 插件。
需要 Hexo v7.0.0+。
功能
- 使用 Shiki 渲染代码块，类似于 Hexo 默认的高亮器。
- 支持双主题或更多主题。
- 支持自定义语言。
安装与配置
首先，安装本插件：
npm install hexo-highlighter-shiki --save
然后在 config.yml 中切换代码高亮引擎：
syntax_highlighter: shiki
最后配置 shiki：
shiki:
theme: one-dark-pro
配置项
完整配置如下：
shiki:
theme: "one-dark-pro" # Theme, see https://shiki.style/themes for supported themes.
line_number: false
strip_indent: true
tab_replace: " "
pre_style: true # Preserve the style of the <pre> tag, i.e., the theme's `background-color`.
additional:
langs: # List of the TextMate grammar json of languages to be added.
- path/to/lang_grammar.json
lang_alias: # List of the alias of languages.
your_alias1: lang_name1
your_alias2: lang_name2
额外地，你可以在 theme 选项中指定多个主题：
shiki:
theme:
light: one-light
dark: one-dark-pro
# ...
在 Dual Themes 中查看如何切换多个主题。
Bugs
mathjax
如果你正在使用 hexo-filter-mathjax 或其他任意在本地使用 mathjax 渲染数学公式的插件，在渲染包含代码块且开启 mathjax 渲染的文章时可能会出现 Error: Can't find handler for document。这是 mathjax 的问题，mathjax 的 LiteDOM adaptor 无法解析复杂的 HTML 片段。
解决方法
以 hexo-filter-mathjax 插件为例，修改源代码中的这一行:
- data.content = mathjax(data.content);
+ data.content = data.content.replace(/<span\s+class="math\s+[^"]*">\\[\(\[].*?\\[\)\]]<\/span>/gs, mathjax);
这可以避免对那些复杂的 HTML 片段进行渲染导致的 Can't find handler for document 错误。
相关 Issues
感谢
本插件基于
进行开发。