hexo博客next主题添加对数学公式的支持

hexo博客默认为markdown格式，但是新搭建的hexo博客不支持公式渲染，下面介绍hexo博客next主题下添加对数学公式支持的方法。

---

环境说明：
hexo版本：5.4.1
next版本： 最新版本（老版本已经停止更新，大家就不要再装啦！）

---

1、选择哪个公式插件？

打开hexo官网，在 插件 中搜索math，可以看到hexo官方提供两个支持数学公式的插件，分别是：
1、hexo-filter-mathjax
2、hexo-math
如下所示：

其中hexo-filter-mathjax只提供对mathjax数学公式，而hexo-math则提供mathjax和katex数学公式，两者均支持latex语法。笔者尝试了两种方式，最后发现实际上还是hexo-filter-mathjax更好用，原因主要有：
① hexo-filter-mathjax的格式和latex语法一致，比较简洁，而hexo-math则比较麻烦，比如我们要输入一个公式：
$$sin(\omega t)=\frac{1}{2j}(e^{j\omega t}-e^{-j\omega t})$$
则，hexo-filter-mathjax的格式为：

$$
sin(\omega t)=\frac{1}{2j}(e^{j\omega t}-e^{-j\omega t})
$$

而，hexo-math的格式为：

{% mathjax %}
sin(\omega t)=\frac{1}{2j}(e^{j\omega t}-e^{-j\omega t})
{% endmathjax %}

或者

{% katex %}
sin(\omega t)=\frac{1}{2j}(e^{j\omega t}-e^{-j\omega t})
{% endkatex %}

② hexo-filter-mathjax格式公式在VSCode中可以实时渲染（因为markdown可以渲染latex公式），而hexo-math插件支持的公式则不支持，所以如果安装的是hexo-math，则我们在VSCode中写md时无法看到公式的实时渲染。
③ CSDN同样支持markdown，所以也支持latex格式的公式，所有我们使用hexo-filter-mathjax格式写的md博客可以一次书写，多端部署，不会出现公式无法渲染的情况。
综上所述，推荐安装hexo-filter-mathjax，下面介绍hexo-filter的安装和配置。

2、安装并配置hexo-filter-mathjax

接下来介绍hexo-filter-mathjax的安装和配置步骤。
在安装过程中使用了以下描述，其含义为：
hexo目录：指的是hexo主目录（也称为站点目录），比如我的hexo博客放在 E:\Github\hexoBlog\ 目录，则我的hexo目录就是 E:\Github\hexoBlog
next主题目录：指的是你的主题目录，比如我的next主题的路径为：E:\GitHub\hexoBlog\themes\next，则我的主题目录就是：E:\GitHub\hexoBlog\themes\next
下面配置步骤中的所有命令均采用Git Bash命令行工具操作。

2.1 卸载hexo-math

首选，在hexo目录下使用下面的命令查看你是否已经安装了hexo-math插件：

npm list hexo-math

如果显示如下，则说明您没有安装hexo-math插件，这时候直接忽略2.1。

如果已经安装hexo-math，则会显示hexo-math版本号：

这时候输入以下命令将其卸载：

npm uninstall hexo-math --save

2.2 安装hexo-filter-mathjax

输入以下命令安装hexo-filter-mathjax：

npm install hexo-filter-mathjax --save

检查是否安装成功：

npm list hexo-filter-mathjax

如果显示了hexo-filter-mathjax版本号则说明安装成功。
安装成功后，我们可以进行一些全局配置，打开hexo目录下的_config.yml文件(我的是E:\Github\hexoBlog_config.yml)，在最后面添加如下的代码：

mathjax:
  tags: none # or 'ams' or 'all'
  single_dollars: true # enable single dollar signs as in-line math delimiters
  cjk_width: 0.9 # relative CJK char width
  normal_width: 0.6 # relative normal (monospace) width
  append_css: true # add CSS to pages rendered by MathJax
  every_page: false # if true, every page will be rendered by MathJax regardless the `mathjax` setting in Front-matter

3、安装公式渲染器

hexo-math默认的公式渲染器是hexo-renderer-marked，它和markdown的语法有冲突，我们将其卸载，查看是否安装了hexo-renderer-marked公式渲染器：

npm list hexo-renderer-marked

如果安装了将其卸载：

npm uninstall hexo-renderer-marked  --save

然后我们安装一个新的公式渲染器，叫做hexo-renderer-kramed，它对hexo-renderer-marked进行了改进，在hexo目录下输入下面的命令安装：

npm install hexo-renderer-kramed --save

同样可以使用：

npm list hexo-renderer-kramed

来检查hexo-renderer-kramed是否安装成功(没成功就多试几次)。
安装成功后，我们修改以下文件的内容防止语法冲突。打开打开hexo主目录下的这个文件：E:\Github\hexoBlog\node_modules\kramed\lib\rules\inline.js，然后修改下面的规则（大家最好不要删除原代码，只是将其注释掉）：

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

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

记得保存并退出。
最后，我们打开next主题目录下的_config.yml，开启对mathjax的支持，如下所示：

4、公式输入测试

4.1 行间公式

$$
i\hbar\frac{\partial}{\partial t}\psi=-\frac{\hbar^2}{2m}\nabla^2\psi+V\psi
$$

则显示效果如下：
$$i\hslash \frac{\partial }{\partial t}\psi =-\frac{{\hslash }^2}{2m}{\nabla }^2\psi +V\psi$$

4.2 行内公式

行内公式两边各用一个$标识，$和公式之间切记不要有空格：

行间公式$O(f(n))=log_2^{n}$测试

其显示效果如下：
行间公式 $O(f(n))=lo{g}_2^n$ 测试
当前设置是所有博客文章自动开启对mathjax渲染支持，如果要关闭，请在文章的头部配置中关闭：

参考资料

hexo官网
hexo-filter-mathjax的Github主页
hexo-math的Github主页
mathjax官网
latex常用公式格式