Fluid 主题之数学公式

Fluid 主题之数学公式

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

一、原因

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

因为类 Latex 格式书写的数学公式下划线_表示下标，有特殊的含义，如果被强制转换为<em>标签，那么 MathJax 引擎在渲染数学公式的时候就会出错。

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

二、解决方法

1. 卸载默认引擎，并安装新的渲染引擎

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

2. 修改/node_modules/hexo-renderer-kramed/lib/renderer.js

注释formatText函数中的全部逻辑，直接将text返回

1
2
3
function formatText(text) {
  return text;
}

3. 修改hexo的渲染源码/node_modules/kramed/lib/rules/inline.js

1
2
3
4
// 第11行修改为：
escape: /^\\([`*{}\[\]()# +\-.!_>])/,
// 第20行修改为：
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

4. 停止使用 hexo-math，安装 hexo-renderer-mathjax

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

5. 更新 Mathjax 的 CDN 链接，打开/node_modules/hexo-renderer-mathjax/mathjax.html，在最后一行添加js：

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

6. 修改主题配置，打开/source/_data/fluid_config.yml 文件

1
2
3
4
5
post:
  math:  
    enable: true  
    specific: false   
    engine: mathjax   # 支持 mathjax 或 katex

7. 在根目录下修改_config.yml，添加

1
mathjax: true

8. 在想要使用公式渲染的文章Front-matter中打开MathJax

1
mathjax: true

三、其他

参考于：