在Hexo博客中渲染MathJax公式

近期写作时，发现在用 markdown 写文档时，数学公式并不能在Hexo博客中正常显示，总是显示错乱，体验感很差，令人苦恼~

1.默认显示错乱原因

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

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

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

2.解决方法

2.1 更换默认渲染引擎

卸载旧引擎，安装新的渲染引擎。

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

2.2 修改部分可能产生语义冲突的问题

在博客根目录下找到 node_modules\kramed\lib\rules\inline.js 文件，修改 11行的 escape 和 20行的 em 值。

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

2.3 主题配置文件下开启mathjax开关

找到自己的主题配置文件，我的是 _config.butterfly.yml，mathjax默认项设置值为 true。

 # MathJax
 mathjax:
   enable: true
   per_page: true

2.4 文章开启mathjax开关

在需要书写数学公式文章的 Front-matter 下打开开启mathjax开关，配置了mathjax的页面按需加载，不需要渲染数学公式的页面的访问速度就不会受影响。

 ---
 title: index.html
 date: 2023-03-04 19:53:30
 mathjax: true
 ---

2.5 重新启动Hexo检查

这里我进行了本地部署测试，运行如下命令后检查是否正常显示。

 hexo cl;hexo s