Hexo 与 MathJax 的兼容问题

在 markdown 中书写 tex 格式的公式时容易出现渲染的错误,主要是由于特定字符转义的原因。通过查阅资料,将相关解决解决方法记录如下。

问题

  • _ 的转义,在 markdown 中,_ 是斜体,但是在 LaTex 中,却有下标的意思。
  • \\ 的换行,在 markdown 中,\\ 会被转义为\这样也会影响影响 MathJax 对公式中的 \\ 进行渲染。

解决方案

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

1
2
npm uninstall hexo-renderer-marked --save #卸载 hexo 自带的 Markdown 渲染引擎
npm install hexo-renderer-kramed --save #安装 hexo-renderer-kramed 插件,这个渲染插件针对 MathJax 支持进行了改进

执行上面的命令即可,先卸载原来的渲染引擎,再安装新的。

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

1
2
// escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
escape: /^\\([`*\[\]()#$+\-.!_>])/

这一步是在原基础上取消了对 \,{,} 的转义 (escape),同时把第 20 行的 em 变量也要做相应的修改。

1
2
// em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/

重新启动 hexo(先 clean 再 generate), 问题完美解决。s

测试

Simple inline $a = b_i + c$.

This equation $\cos 2\theta = \cos^2 \theta - \sin^2 \theta = 2 \cos^2 \theta - 1 $ is inline.

equation block:

1
2
3
$$
\min_{\mathbf{w},b} \frac{1}{2} \Vert \mathbf{w} \Vert^2 \quad s.t. \quad y_i(\mathbf{w}^T\phi(\mathbf{x})+b) \geq 1, \quad i=1,2,...,m\qquad(9)
$$
1
$$R_{m \times n} = U_{m \times m} S_{m \times n} V_{n \times n}'$$

Reference: 在 Hexo 中渲染 MathJax 数学公式

0%