解决Hexo和Mathjax的冲突

问题

当我们使用Markdown写文档需要输入数学公式的时候,通常使用Latex去书写数学公式,但Markdown的一些符号和Latex的一些符号是冲突的,例如下划线_在Latex中是下标的意思,在Markdown中是<em>标签的意思。

Hexo默认使用marked.js去解析我们写的markdown,碰到Latex公式中和Markdown冲突的符号的时候,比如下划线_,这个辣鸡marked.js就自动处理成<em>,于是Mathjax识别Latex公式的时候就会渲染成奇怪的东西。

数学公式渲染问题的解决方法已经在NexT官方文档里给出了详细的说明和建议

解决方法

网上找了好多个解决办法,都各有缺陷,就不一一列举了。目前比较好的解决方案是更换渲染引擎。将hexo默认的渲染器引擎marked.js卸载掉,然后更换成hexo-renderer-pandoc。大体上解决了符号冲突的问题,唯有一点点缺陷是Pandoc要求的Markdown语法和一般语法稍有不同。

更换引擎

在百度查到的教程里基本上都是建议使用hexo-renderer-kramed

但是呢,按照百度到的方法更换了这个引擎之后,虽然能渲染数学公式了,但是在有序列表里插入Latex公式还是发现序号没了。后来又查了不少博客,发现原来这个hexo-renderer-kramed只是修改了一部分bug(那你特么发布出来坑我们做甚)

最后终于在一个不起眼的角落找到了一篇博文,建议使用hexo-renderer-pandoc,抱着试试看死马当活马医的心态按着教程来了一遍:

  1. 首先安装Pandoc,官网是https://www.pandoc.org

  2. 卸载hexo默认的marked.js,再安装hexo-renderer-pandoc

     npm uninstall hexo-renderer-marked --save
     npm install hexo-renderer-pandoc --save
  3. 注意Pandoc要求的Markdown语法和一般的Markdown语法有些区别,但是常用的几乎一样,碰到问题的时候再查官方文档就行

细数容易进的坑

官网上给了设置hexo-renderer-pandoc的一些方法,如果不需要其他功能可以不按照官网设置。

但如果按着上面设置,要注意官网给的修改后的代码有些地方行末多了分号(不注意看简直坑死人,写那份文档的人用点心好吗)

参考资料

Hexo下mathjax的转义问题

调教Hexo[2]——Hexo与Mathjax的冲突及解决方案