本文主要介绍如何在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语法畅行无阻。
参考资料: