Hexo折腾系列(六)数学公式渲染优化

Hexo折腾系列(六)数学公式渲染优化

有时候我们需要在文章里插入公式,Typora编辑器提供了很好的公式渲染支持,但这只能在本地编辑器里看到效果,而Hexo默认是不支持公式渲染的,因此很多Hexo主题都自带了katex或者mathjax组件来处理渲染数学公式。以我使用的Icarus主题为例,它本身就自带了这两款公式渲染工具,但实际使用效果却不佳,有些公式会显示不正确。究其原因,公式中的_等符号会被错误的识别为markdown语法,导致公式解析错误。本文综合了网上几种方法,得出了一个最为完美的解决方案。

出错原因

为了从根源解决问题,我们首先需要分析出错的原因。Hexo默认使用”hexo-renderer-marked”引擎渲染网页,该引擎会把一些特殊的markdown符号转换为相应的html标签,比如在markdown语法中,下划线_代表斜体,会被渲染引擎处理为<em>标签。因此轮到MathJax引擎渲染的时候,其实公式原文已发生了改变。例如,$x_i$在开始被渲染的时候,处理为x<em>i</em>​,这样MathJax引擎就认为该公式有语法错误,所以不会渲染。

类似的语义冲突的符号还包括* { }等。

官方解决方案

👉官方文档地址

官方提供了两种结局办法:

如果要输入这样一个公式

正常情况下只要输入:

1
2
3
$$
\hat{x}_{k}=\hat{x}_{k}^{-}+K_{t}\left(y_{k}\right)
$$

但因为含有_歧义字符,需要转义:

1
2
3
$$
\hat{x}\_{k}=\hat{x}\_{k}^{-}+K\_{t}\left(y\_{k}\right)
$$

或者将整个公式用一个额外的HTML标签对包裹起来:

1
2
3
4
5
<div>
$$
\hat{x}_{k}=\hat{x}_{k}^{-}+K_{t}\left(y_{k}\right)
$$
</div>

但这两种方法的缺点是:其一,需要额外修改$\TeX$代码,增添了不必要的麻烦;其二,Typora的实时渲染功能没有了。

最佳解决方案

更换Hexo的markdown渲染引擎,hexo-renderer-kramed引擎是在默认的渲染引擎hexo-renderer-marked的基础上修改了一些bug,两者比较接近,功能也是兼容的。

cd到hexo根目录,通过npm安装

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

更换引擎后行间公式可以正确渲染了,但是这样还没有完全解决问题,行内公式的渲染还是有问题,因为hexo-renderer-kramed引擎也有语义冲突的问题。接下来到博客根目录下,找到node_modules\kramed\lib\rules\inline.js,把第11行和第20行做如下修改:

1
2
3
4
5
6
# line 11
- escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
+ escape: /^\\([`*\[\]()#$+\-.!_>])/
# line 20
- em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
+ em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/

之后重启hexo,问题完美解决!要注意的是这样修改后貌似只支持MathJax渲染器,不支持katex了,注意把主题配置文件中plugins > mathjax的值设置为true

1
2
plugins:
mathjax: true

参考资料

[1] Icarus官方文档

[2] 在Hexo中渲染MathJax数学公式

Hexo折腾系列(六)数学公式渲染优化

https://blog.luzy.top/posts/2968289947/

作者

江风引雨

发布于

2020-09-06

更新于

2024-07-10

许可协议

CC BY 4.0

评论