HEXO中显示数学公式

首页摘要:

HEXO本身是不支持显示公式的,但是安装mathJax插件即可对浏览器进行公式渲染,也就是说安装了mathJax就可以像Latex一样显示美观的数学公式。折腾了两个小时,本博客于2019年3月25日支持数学公式显示了!

安装与配置

在git中运行如下命令

1
npm install hexo-math --save

在站点配置文件 _config.yml 中添加:

1
2
3
4
5
6
math:
engine: 'mathjax' # or 'katex'
mathjax:
# src: custom_mathjax_source
config:
# MathJax config

在 主题配置文件中 themes/…./_config.yml 中将 mathJax 设为 true:

1
2
3
4
5
# MathJax Support
mathjax:
enable: true
per_page: false
cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML

但是目前为止还存在一些语义冲突的问题,例如“\\”是无法识别的,这样会导致一些分段函数公式无法渲染成功,需要更换 Hexo 的 markdown 渲染引擎,hexo-renderer-kramed 引擎是在默认的渲染引擎 hexo-renderer-marked 的基础上修改了一些 bug ,两者比较接近,也比较轻量级。

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

执行上面的命令即可,先卸载原来的渲染引擎,再安装新的。 然后,跟换引擎后行间公式可以正确渲染了,但是这样还没有完全解决问题,行内公式的渲染还是有问题,因为 hexo-renderer-kramed 引擎也有语义冲突的问题。接下来到博客根目录下,找到node_modules\kramed\lib\rules\inline.js,把第11行的 escape 变量的值做相应的修改:

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

这一步是在原基础上取消了对\,{,}的转义(escape)。 同时把第20行的em变量也要做相应的修改。

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

至此大功告成!

备注:在电脑端的浏览器要允许加载mathJax的脚本才能正常显示,这都是血的教训啊!!!

#
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×