hexo博客MathJax公式渲染問題

這個問題本身很早之前便碰到了，用MathJax語法寫的一些公式，在本地Markdown編譯器上渲染是沒問題的，但是部署到hexo博客中就出現問題了，以前我是使用圖片代替公式應付過去了，今天從網上找了一下資料，發現了其問題所在，同時也解決了這個問題。

問題

hexo默認使用hexo-renderer-marked引擎去渲染網頁，它會把利用Markdown語法寫的文本去轉換爲相應的html標籤。在利用Markdown寫MathJax公式的時候，常常會用到下劃線_表示下標，可是下劃線_會被hexo的默認引擎hexo-renderer-marked渲染成html中的<em>標籤，表示斜體，這樣一來，咱們寫的MathJax公式就被錯誤渲染了，也就沒辦法正確顯示出來。

例如：

在我寫的KMP算法這篇文章中，沒有解決問題以前，出現着各類渲染錯誤，而當你仔細觀察那些錯誤之處時，會發現你寫的MathJax公式中的下劃線_會莫名其妙地消失。
下圖是我利用Markdown編譯器寫的文本

是表格的一部分，在Markdown編譯器預覽是正確的，以下圖

可是部署到hexo博客後，便出現了錯誤，呈現的效果以下圖

咱們發現公式沒有渲染成功，仔細觀察這個式子特徵，發現它和我以前寫的相比，少了部分_,打開該網頁源代碼，定位到這裏，以下圖

會發現缺乏的_實際上是被hexo的渲染引擎渲染成了html中的<em>標籤，這樣一來，這個公式就不完整了，那麼也就不能正確顯示了。

解決方法

從上面的分析，咱們能夠知道問題或許出在hexo的渲染引擎上，若是渲染引擎不把公式中的一些特殊字符渲染成html標籤，也就避免了這個問題。固然已經有人意識到了這個問題，而且對原先的渲染引擎進行了改進，生成了新的hexo-renderer-kramed引擎，這裏是它的Github頁面，因此咱們只須要卸載默認引擎，並安裝這個新的渲染引擎便可。

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

我以前寫有一篇KMP算法，就是在這裏發現的渲染出錯問題，當我把渲染引擎更換以後，發現大部分公式都正確渲染了，而從網上其餘人的敘述中，也一樣提到了這個問題，便是行間公式都沒有問題，可是個別行內公式還會出現渲染出錯，從網上找到了一個方法，解決了這一問題。
定位到你的博客根目錄，找到../node_modules/kramed/lib/rules/inline.js文件，

進行部分修改：

//escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,      第11行，將其修改成
escape: /^\\([`*\[\]()#$+\-.!_>])/,
//em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,    第20行，將其修改成
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

它取消了該渲染引擎對\,{,}的轉義，而後再hexo clean、hexo g從新部署，便可解決問題。

另外須要注意一點，對於須要用到MathJax公式的文章，要在Front-matter中打開MathJax開關，例如：

---
date: 2017/8/3 18:20:00
tags: hexo
mathjax: true
title: hexo博客MathJax公式渲染
---

MathJax公式語法

下面呢，我整理總結了一番比較經常使用的MathJax公式語法，同時也能夠用來測試一下渲染效果。

符號	釋義	測試用例	最終效果
^	上標	x^{y^z}=(1+e^x)^{-2xy^w}	$ x^{y^z}=(1+e^x)^{-2xy^w} \(| |_|下標| CO_2 |\) CO_2 \(| |\frac{分子}{分母} or 分子 \over 分母|分數| f(x,y,z)=3y^2z(3+\frac{7x+5}{1+y^2}) |\) f(x,y,z)=3y^2z(3+\frac{7x+5}{1+y^2}) \(| |\sqrt[根指數，省略時爲2]{被開方數}|開方|\sqrt{2}、\sqrt[3]{9} |\)\sqrt{2} 、\sqrt[3]{9}\(| | \ldots|與文本底線對齊的省略號|x_1x_2{\ldots}x_n |\)x_1x_2{\ldots}x_n\(| |\cdots|與文本中線對齊的省略號| x_1x_2{\cdots}x_n |\)x_1x_2{\cdots}x_n\(| |\int_積分下限^積分上限(被積表達式)|積分|\int_1^n{x^2}dx |\) \int_1^n{x^2}dx \(| |\sum_{下標表達式}^{上標表達式} {累加表達式}|累加|\sum_{i=1}^n \frac{1}{i^2} |\) \sum_{i=1}^n \frac{1}{i^2} \(| |\\, or \; or \quad or \qquad|不一樣寬度的空格| a \, b \mid a \; b \mid a \quad b \mid a \qquad b |\) a , b \mid a ; b \mid a \quad b \mid a \qquad b \(| |\color{顏色}{文字}|更改文字顏色|\color{red}{紅色} |\) \color{red}{紅色} $

上面的一些基本語法使用了行內公式， 渲染效果沒有問題，下面再利用行間公式寫一些較爲複雜的公式。

分段函數

分段函數格式爲f(x)=\begin{cases}語句1\\語句2\\...\end{cases}
\text{文字}中仍可使用$公式$去插入其餘公式，因此能夠將其結合分段函數一塊兒使用。

實例：
md文本

$$ 
f(n)=\begin{cases}
n/2, & \text{若是$ x<=2 $}\\
3n+1, & \text{若是$ x>2 $}
\end{cases}
$$

最終效果

\[ f(n)=\begin{cases} n/2, & \text{若是$ x<=2 $}\\ 3n+1, & \text{若是$ x>2 $} \end{cases} \]

大括號和小括號

()、[]、{}表示的便是符號自己，使用\{\}來表示{}。可是若是要顯示大號的括號時，須要使用\left和\right命令。

實例：

• 正常括號

md文本

$$
f([\frac{1+\{x,y\}}{(\frac{x}{y}+\frac{y}{x})(u+1)}+a]^{3\2})
$$

最終效果

\[ f([\frac{1+\{x,y\}}{(\frac{x}{y}+\frac{y}{x})(u+1)}+a]^{3\2}) \]

• 大括號

md文本

$$
f\left(
    \left[
        \frac{
            1+\left\{x,y\right\}
        }{
        \left(
            \frac{x}{y}+\frac{y}{x}
        \right)
        \left(u+1\right)
        }+a
    \right]^{3\2}
\right)
$$

最終效果

\[ f\left( \left[ \frac{ 1+\left\{x,y\right\} }{ \left( \frac{x}{y}+\frac{y}{x} \right) \left(u+1\right) }+a \right]^{3\2} \right) \]

添加刪除線

使用刪除線功能必須使用行間公式，刪除線分爲片斷刪除線和整段刪除線，樣式比較多，在這裏我只列舉一種比較經常使用的水平刪除線，它屬於整段刪除線的一種。

整段刪除線使用\require{enclose}來顯示，聲明整段刪除線後，使用\enclose{刪除線效果}{字符}來實現刪除線效果，而水平刪除線效果用關鍵字horizontalstrike。

實例：

md文本

$$
\require{enclose}\begin{array}{}
\enclose{horizontalstrike}{x+y}\\
\enclose{horizontalstrike}{x*y}\\
\end{array}
$$

最終效果

\[ \require{enclose}\begin{array}{} \enclose{horizontalstrike}{x+y}\\ \enclose{horizontalstrike}{x*y}\\ \end{array} \]

注意事項

我在更換hexo的渲染引擎的時候，還出了一點問題，當我卸載了原先的渲染引擎，安裝新的時，出了錯誤，以下圖：

它顯示個人npm版本爲v4.2.0，我將npm更新到了最新版本，再次安裝，便沒有問題了。

經過這篇文章和KMP算法，裏面也涉及了較多的MathJax公式，從效果上來看，都沒有出現什麼問題，這也說明了該方法仍是有必定的效果的。

原文地址連接

參考資料

• CMD公式指導手冊
• 如何處理Hexo和MathJax的兼容問題
• 在Hexo中渲染MathJax數學公式