在任意的hexo主题支持数学公式

在写上一篇文章时，有不少的数学公式，而hexo原生是不支持这些公式的渲染的，因此废了不少心思才搞定。我查阅了很多资料，它们大都有各种问题，如只针对某种主题（Next主题），或是cdn不稳定，或是公式加载失败等。因此我整理出了一篇相对方便可用的教程。

第一步：安装MathJax

MathJax就是我们用来渲染数学公式的js引擎。

不过在这之前，我们还需要卸载自带的hexo-math以避免冲突。

1
2

npm uninstall hexo-math --save
npm install hexo-renderer-mathjax --save

第二步：更新MathJax的CDN链接

由于MathJax官方cdn已停止维护，其他cdn也有如不稳定，必须翻墙等问题，我找到了一个可以使用的cdn地址。

打开/node_modules/hexo-renderer-mathjax/mathjax.html

将最后一行cdn地址改为（版本可以根据实际情况修改，我是2.7.3）

1

<script src="//cdn.bootcss.com/mathjax/2.7.3/MathJax.js?config=TeX-MML-AM_CHTML"></script>

第三步：更换默认渲染引擎

Hexo默认的渲染引擎hexo-renderer-marked对MathJax的支持很不好，我们修改为kramed引擎

1
2

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

第四步：更改转义规则

因为 hexo 默认的转义规则会将一些字符进行转义，比如 _ 转为 <em> ，所以我们需要对默认的规则进行修改。
首先， 打开/node_modules/kramed/lib/rules、inline.js

把：

1

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

更改为：

1

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

把：

1

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

更改为：

1

em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

第五步：使用hexo-filter-mathjax

对部分支持MathJax的主题来说，只需在主题配置文件将相关配置项开启即可使用MathJax。但对很多主题，如我使用的CleanBlog主题来说，没有这样的功能。有一个工具可以帮助我们：hexo-filter-mathjax。

安装：

1

npm install hexo-filter-mathjax --save

对需要开启的博文，在其Front-Matter处增加mathjax: true这一行即可，如：

1
2
3
4
5
6

---
title: On the Electrodynamics of Moving Bodies
categories: Physics
date: 1905-06-30 12:00:00
mathjax: true
---

如果你还想配一些个性化需求，可以在hexo-filter-mathjax的教程中查看。

这样就大功告成了，写MarkDown的时候正常写数学公式，就可以在生成的博客中展示。

效果可以见 Sentinel源码阅读（四）。