Hexo博客插入数学公式

在写一些内容时，会遇到需要添加数学公式的地方，Hexo部分主题不支持公式的渲染，比如我正在使用的vivia主题，在查阅一些资料之后，我使用MathJax引擎实现了vivia主题下的数学公式渲染。

MathJax简介：https://www.osgeo.cn/mathjax/basic/mathjax.html

该引擎是一款可在所有现代浏览器中工作的开源js显示引擎，辅助页面作者编写含有数学公式的文档

Step 1 : 安装MathJax引擎并更换渲染引擎：

​ 操作包括卸载Hexo自带的Hexo-math，卸载默认的对MathJax不友好的marked引擎

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

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

Step 2 : 更新MathJax的cdn链接

Step 3 : 更改部分转义规则

hexo 默认的转义规则会将一些字符进行转义，所以要对默认的规则进行修改。
首先， 打开/node_modules/kramed/lib/rules/inline.js

把：

escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

更改为：

escape: /^\\([`*\[\]()# +\-.!_>])/,
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

Step 4 : 主题未预配置下使用Hexo-filter-mathjax

对于已经配置MathJax的主题来说，在相关config文件里打开控件即可，对于未配置的主题，可以使用Hexo-filter-mathjax来帮助实现

Hexo-filter-mathjax项目地址：https://github.com/next-theme/hexo-filter-mathjax

安装：

npm install hexo-filter-mathjax --save

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

---
title: xxxxxx
categories: xxxxx
date: xxxx-xx-xx
mathjax: true
---

测试

行间公式：

$$\frak{\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6} }$$

行内公式：

矩阵运算：

$$\left( \begin{array}{c} s \\ t \end{array} \right) = \left( \begin{array}{cc} cos(b) & -sin(b) \\ sin(b) & cos(b) \end{array} \right) \left( \begin{array}{c} x \\ y \end{array} \right)$$

*注意到有的cdn版本MathJax框架下公式字体对行间公式有一定影响，可能会一些字体会被渲染成主题相同字体，且移动端不能很好地显示

参考资料：

https://www.cnblogs.com/wangxin37/p/8185688.html

https://heartlessly.github.io/others/latex-mathjax-gong-shi-zi-ti-mei-hua/