Hexo博客使用MathJax公式並解決Markdown渲染衝突問題

02-19

本文主要介紹如何在Hexo博客中使用Mathjax公式的基本配置方法，Mathjax的基本語法可參見：Mathjax基本語法。

並且解決了Hexo博客在使用過程中，Markdown語法默認渲染效果與Mathjax語法互相衝突的問題。

利用MathJax來渲染LaTeX數學公式

hexo主題Next中已經集成了對mathjax的支持。在主題配置文件，blog hemes ext\_config.yml中定位到如下片段:

# MathJax Supportmathjax: 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 --savehexo math install

然後在新建的博文中寫上一個麥克斯韋方程組查看LaTeX效果：

$$egin{eqnarray} ablacdotvec{E} &=& frac{ ho}{epsilon_0} \ ablacdotvec{B} &=& 0 \ abla imesvec{E} &=& -frac{partial B}{partial t} \ abla imesvec{B} &=& mu_0left(vec{J}+epsilon_0frac{partial E}{partial t} ight)end{eqnarray}$$

egin{eqnarray}

ablacdotvec{E} &=& frac{
ho}{epsilon0}

ablacdotvec{B} &=& 0

abla imesvec{E} &=& -frac{partial B}{partial t}

abla imesvec{B} &=& mu0left(vec{J}+epsilon_0frac{partial E}{partial t}
ight)

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: /^_((?:[^_]|__)+?)_|^*((?:**|[sS])+?)*(?!*)/,

改為:

em:/^*((?:**|[sS])+?)*(?!*)/,

去掉_的斜體含義，這樣就解決了。為什麼說通用性很高，因為我們沒有修改文章的內容，可以放到別的引擎下也會順利渲染。

這個困擾我許久的問題終於這麼解決了。之前一直按照標準mathjax語法寫公式，但是有的時候就會無法顯示公式。
按照上述修改後，markdown不再處理(公式中的)_以及。mathjax語法暢行無阻。

參考資料：

https://segmentfault.com/a/1190000007261752