hexo渲染数学公式问题解决

问题

在使用Hexo建立博客的时候，我发现数学公式是无法直接在网页上渲染出来的。本博客使用的Redefine主题提供了MathJax插件的安装和启用方法，但最后发现只有行内公式和部分行间公式被成功渲染了。（此事在博客建立记录帖中亦有记载）

后来检查发现，出现这种问题的原因很有可能是markdown中下划线表示斜体，这与其在LaTex中表示下划线的语义发生了冲突。

解决

主要参考：Hexo中数学公式渲染失败的解决 - Stardustor’s Blog

网上对此提出的解决办法是：将原本的hexo-renderer-marked引擎更换为hexo-renderer-pandoc（原先的引擎并不支持MathJax）。

提醒

在安装hexo-renderer-pandoc引擎之前，需要先在电脑上安装pandoc。可以前往pandoc仓库发布页面下载安装包。对于Windows操作系统，建议下载msi文件，直接无脑点下一步完成安装即可。

在cmd命令行输入pandoc --version，若出现版本号则说明安装成功。

pandoc安装成功的命令行

如果不提前安装pandoc，之后在hexo clean或hexo generate处会报错[ERROR][hexo-renderer-pandoc] pandoc exited with code null.。

在站点根目录下运行命令：

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

然后重新生成博客：

hexo clean
hexo generate
hexo server

对于需要渲染数学公式的文章，需要在文章头部添加mathjax: true。

此时，数学公式应该能够正常渲染了。下面放几个复杂度不同的公式测试一下：

• 二次方程求根公式

  $$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$

• 欧拉公式

  $$e^{i\pi} + 1 = 0$$

• 矩阵公式

  $$\left( \begin{matrix} 1& 2& 3\\ 4& 5& 6\\ 7& 8& 9\\ \end{matrix} \right) \cdot \left( \begin{array}{c} x\\ y\\ z\\ \end{array} \right) =\left( \begin{array}{c} 6\\ 15\\ 24\\ \end{array} \right)$$

• 多行方程

  $$\begin{align} f(x) &= \int_{-\infty}^\infty \hat{f}(\xi) e^{2\pi i \xi x} \, d\xi \\ \hat{f}(\xi) &= \int_{-\infty}^\infty f(x) e^{-2\pi i \xi x} \, dx \end{align}$$

• 交换图表（需amsmath宏包）

  $$\begin{equation} \begin{CD} A @>f>> B \\ @V g VV @VV h V \\ C @>>k> D \end{CD} \end{equation}$$

• 极限

  $$\lim_{n \to \infty} \left( \sum_{k=1}^n \frac{1}{k} - \ln n \right) = \gamma$$

• 量子力学符号

  $$\hat{H} \psi = E \psi \quad \text{where} \quad \hat{H} = -\frac{\hbar^2}{2m} \nabla^2 + V(\mathbf{r})$$

• 概率论公式

  $$P(A \mid B) = \frac{P(B \mid A) P(A)}{P(B)}$$

• 复杂公式

  $$\begin{aligned} q\left( \mathbf{x}_t|\mathbf{x}_{t-1} \right) &=\sqrt{\alpha _t}\mathbf{x}_{t-1}+\sqrt{1-\alpha _t}\epsilon _{t}\\ &=\sqrt{\alpha _t}\left( \sqrt{\alpha _{t-1}}\mathbf{x}_{t-2}+\sqrt{1-\alpha _{t-1}}\epsilon _{t-1} \right) +\sqrt{1-\alpha _t}\epsilon _{t}\\ &=\sqrt{\alpha _t\alpha _{t-1}}\mathbf{x}_{t-2}+\sqrt{\alpha _t-\alpha _t\alpha _{t-1}}\epsilon _{t-1}+\sqrt{1-\alpha _t}\epsilon _{t}\\ &=\sqrt{\alpha _t\alpha _{t-1}}\mathbf{x}_{t-2}+\sqrt{1-\alpha _t\alpha _{t-1}}\epsilon\\ \vdots\\ &=\sqrt{\bar{\alpha}_t}\mathbf{x}_0+\sqrt{1-\bar{\alpha}_t}\epsilon\\ q\left( \mathbf{x}_t|\mathbf{x}_0 \right) &=\mathcal{N} \left( \mathbf{x}_t;\sqrt{\bar{\alpha}_t}\mathbf{x}_0,\left( 1-\bar{\alpha}_t \right) \mathbf{I} \right)\\ \end{aligned}$$

弯路

网上对于如何解决这个问题的方法有很多，其中还有一种主流的方法是将渲染引擎更换为hexo-renderer-kramed，并且还需要进入项目根目录下该引擎的源代码进行修改以解决语义冲突，并修改配置文件，很麻烦。我先参考的就是这个思路。

主要参考：这次彻底解决在Hexo中渲染MathJax数学公式出现的问题！！！ - CSDN

不推荐食用，比较麻烦。话说你这也没解决啊喂！

hexo-renderer-kramed引擎在hexo-renderer-marked渲染引擎的基础上修改了一些bug（“kram”这个名字目测是把“mark”倒过来拼写得到的），支持了MathJax。我没有把这个引擎卸载，现在看来暂时没什么问题，不会和pandoc渲染引擎冲突。

并且更加令人绝望的是，一通操作过后，行内公式的渲染还是跟之前一样没什么问题，而行间公式不仅渲染不出来，甚至直接不在网页上显示了。我将配置文件改回来之后安装了pandoc渲染引擎才可以正常渲染，算是勉强解决了问题吧。

有时候可能会出现大部分公式渲染正确，部分公式出错的情况，可以尝试多渲染几次。