Hexo折腾系列（六）数学公式渲染优化

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

出错原因

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

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

官方解决方案

👉官方文档地址

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

如果要输入这样一个公式

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

正常情况下只要输入：

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

但因为含有_歧义字符，需要转义：

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

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

<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安装

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

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

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

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

plugins:
    mathjax: true

参考资料

[1] Icarus官方文档

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