在Hexo中渲染MathJax数学公式

在用markdown写技术文档时，免不了会碰到数学公式。常用的Markdown编辑器都会集成Mathjax，用来渲染文档中的类Latex格式书写的数学公式。基于Hexo搭建的个人博客，默认情况下渲染数学公式却会出现各种各样的问题。

代码编辑器，强烈推荐使用微软的 VS code，相比Atom开启迅速，使用方便，扩展丰富

原因

Hexo默认使用”hexo-renderer-marked”引擎渲染网页，该引擎会把一些特殊的markdown符号转换为相应的html标签，比如在markdown语法中，下划线'_'代表斜体，会被渲染引擎处理为标签。

因为类Latex格式书写的数学公式下划线'_'表示下标，有特殊的含义，如果被强制转换为标签，那么MathJax引擎在渲染数学公式的时候就会出错。例如，$x_i$在开始被渲染的时候，处理为$xi$，这样MathJax引擎就认为该公式有语法错误，因为不会渲染。

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

解决方法

解决方案有很多，可以网上搜下，为了节省大家的时间，这里只提供亲身测试过的最靠谱的方法。

第一步：安装Kramed

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

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

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

第二步：更改文件配置

打开/node_modules/hexo-renderer-kramed/lib/renderer.js，更改为，直接返回text：

改动前：

// Change inline math rule
function formatText(text) {
    // Fit kramed's rule: $$ + \1 + $$
    return text.replace(/`\$(.*?)\$`/g, '$$$$$1$$$$');
}

改动后：

// Change inline math rule
function formatText(text) {
    return text;
}

第三步: 停止使用 hexo-math，并安装mathjax包

卸载hexo-math

1	npm uninstall hexo-math --save

安装 hexo-renderer-mathjax 包

1	npm install hexo-renderer-mathjax --save

第四步: 更新 Mathjax 的配置文件

打开/node_modules/hexo-renderer-mathjax/mathjax.html
如图所示更改<script>为：
即注释掉<script>代码，并把以下代码复制到对应位置

更改前：

1	<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>

更改后：

1	<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

整体效果：

1
2

<!-- <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>

第五步: 更改默认转义规则

因为LaTeX与markdown语法有语义冲突，所以hexo默认的转义规则会将一些字符进行转义，所以我们需要对默认的规则进行修改.
打开/node_modules\kramed\lib\rules\inline.js

更改前：

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

更改后：
1
escape: /^\\([`*\[\]()# +\-.!_>])/,

更改前：

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

更改后：
1
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

第六步: 开启mathjax

打开/themes/yilia主题目录下的config.yml文件
因为我用的yilia主题，所以路径是/themes/yilia

我们需要在_config.yml文件中开启 Mathjax，找到 mathjax 字段添加如下代码：(不同的主题配置方法略微有区别)

1 2	mathjax: enable: true

或者

1	mathjax: true

此外，还需要，更改当前文件下math: true

更改前：
1
2
math:
enable: false
更改后：
1
2
math:
enable: true

需要注意的是：无论是配置文件还是博客文件，配置项跟配置参数均有有一个空格，否则会配置失败
例如：

1
2
3

mathjax: true（mathjax:空格true）
而不是
mathjax:true（mathjax:true）

写博客文件时，要开启 Mathjax选项，，添加以下内容：

1	mathjax: true

例如：

title: 特征提取——局部特征
date: 2018-07-16 09:39:40
tags: [GitHub, Mysql]
mathjax: true

结束语

通过以上步骤，我们就可以在 hexo 中使用 Mathjax 来书写数学公式。

在Hexo中添加LaTex公式

在Hexo中渲染MathJax数学公式

原因

解决方法

第一步：安装Kramed

第二步：更改文件配置

第三步: 停止使用 hexo-math，并安装mathjax包

第四步: 更新 Mathjax 的配置文件

第五步: 更改默认转义规则

第六步: 开启mathjax

结束语

参考文献

在Hexo中渲染MathJax数学公式

原因

解决方法

第一步： 安装Kramed

第二步：更改文件配置

第三步: 停止使用 hexo-math，并安装mathjax包

第四步: 更新 Mathjax 的 配置文件

第五步: 更改默认转义规则

第六步: 开启mathjax

结束语

参考文献

第一步：安装Kramed

第四步: 更新 Mathjax 的配置文件