Fork me on GitHub

Hexo博客使用MathJax并解决Markdown渲染冲突问题

本文主要介绍如何在Hexo博客中使用Mathjax公式的基本配置方法,Mathjax的基本语法可参见:Mathjax基本语法

并且解决了Hexo博客在使用过程中,Markdown语法默认渲染效果与Mathjax语法互相冲突的问题。

利用MathJax来渲染LaTeX数学公式

hexo主题Next中已经集成了对mathjax的支持。在主题配置文件blog\themes\next\_config.yml中定位到如下片段:

# MathJax Support
mathjax:
  enable: true
  per_page: false
  cdn: //cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML

将enable中的false改为true即可。

另外,再安装一个自动部署MathJax的hexo插件 。安装方式也很简单,在你的博客文件夹下执行:

npm install hexo-math --save
hexo math install

然后在新建的博文中写上一个麦克斯韦方程组查看LaTeX效果:

$$
\begin{eqnarray}
\nabla\cdot\vec{E} &=& \frac{\rho}{\epsilon_0} \\
\nabla\cdot\vec{B} &=& 0 \\
\nabla\times\vec{E} &=& -\frac{\partial B}{\partial t} \\
\nabla\times\vec{B} &=& \mu_0\left(\vec{J}+\epsilon_0\frac{\partial E}{\partial t} \right)
\end{eqnarray}
$$

$$
\begin{eqnarray}
\nabla\cdot\vec{E} &=& \frac{\rho}{\epsilon_0} \\
\nabla\cdot\vec{B} &=& 0 \\
\nabla\times\vec{E} &=& -\frac{\partial B}{\partial t} \\
\nabla\times\vec{B} &=& \mu_0\left(\vec{J}+\epsilon_0\frac{\partial E}{\partial t} \right)
\end{eqnarray}
$$

这时如果你会发现出了一些问题,原因是hexo先用marked.js渲染,然后再交给MathJax渲染。在marked.js渲染的时候下划线_是被escape掉并且换成了<em>标签,即斜体字,另外LaTeX中的\\也会被转义成一个\,这样会导致MathJax渲染时不认为它是一个换行符了。

mathjax与markdown默认渲染冲突的解决方案

解决方案为:修改Hexo渲染源码。

这个方法是我目前使用的,相对来说,通用性较高的一种方式。思路就是修改hexo的渲染源码: nodes_modules/lib/marked/lib/marked.js:

  • 去掉\的额外转义

  • 将em标签对应的符号中,去掉_,因为markdown中有*可以表示斜体,——完全可以去掉。

具体思路参考了使Marked.js与MathJax共存, 打开nodes_modules/marked/lib/marked.js:
第一步: 找到下面的代码:

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

改为:

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

这样就会去掉\的转义了。
第二步: 找到em的符号:

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

改为:

em:/^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

去掉_的斜体含义,这样就解决了。为什么说通用性很高,因为我们没有修改文章的内容,可以放到别的引擎下也会顺利渲染。

这个困扰我许久的问题终于这么解决了。之前一直按照标准mathjax语法写公式,但是有的时候就会无法显示公式。

按照上述修改后,markdown不再处理(公式中的)_以及\。mathjax语法畅行无阻。

参考资料:

https://segmentfault.com/a/1190000007261752

------ 本文结束感谢您的阅读 ------
坚持原创技术分享,您的支持将鼓励我继续创作!