hexo next主題解決無法顯示數學公式
在用markdown寫技術文件時，免不了會碰到數學公式。常用的Markdown編輯器都會整合Mathjax，用來渲染文件中的類Latex格式書寫的數學公式。基於Hexo搭建的個人部落格，預設情況下渲染數學公式卻會出現各種各樣的問題。
這個問題搞了好久才找到解決方案，感謝@小毛驢
原因
Hexo 預設使用 hexo-renderer-marked 引擎渲染網頁，該引擎會把一些特殊的 markdown 符號轉換為相應的 html 標籤，比如在 markdown 語法中，下劃線_
<em>標籤。
因為類 Latex 格式書寫的數學公式下劃線_表示下標，有特殊的含義，如果被強制轉換為<em>標籤，那麼 MathJax 引擎在渲染數學公式的時候就會出錯。
類似的語義衝突的符號還包括*, {, }, \\等。
解決方法
更換 Hexo 的 markdown 渲染引擎，hexo-renderer-kramed 引擎是在預設的渲染引擎 hexo-renderer-marked 的基礎上修改了一些 bug ，兩者比較接近，也比較輕量級。
npm uninstall hexo-renderer-marked --save - 1
- 2
執行上面的命令即可，先解除安裝原來的渲染引擎，再安裝新的。
然後，跟換引擎後行間公式可以正確渲染了，但是這樣還沒有完全解決問題，行內公式的渲染還是有問題，因為 hexo-renderer-kramed 引擎也有語義衝突的問題。接下來到部落格根目錄下，找到node_modules\kramed\lib\rules\inline.js，把第11行的 escape 變數的值做相應的修改：
//escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
escape: /^\\([`*\[\ - 1
- 2
這一步是在原基礎上取消了對\,{,}的轉義(escape)。
同時把第20行的em變數也要做相應的修改。
//em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,- 1
- 2
重新啟動hexo（先clean再generate）,問題完美解決。哦，如果不幸還沒解決的話，看看是不是還需要在使用的主題中配置mathjax開關。
在 Next 主題中開啟 MathJax 開關
如何使用了主題了，別忘了在主題（Theme）中開啟 MathJax 開關，下面以 next 主題為例，介紹下如何開啟 MathJax 開關。
進入到主題目錄，找到 _config.yml 配置問題，把 math 預設的 false 修改為true，具體如下：
# Math Equations Render Support
math:
enable: true
# Default(true) will load mathjax/katex script on demand
# That is it only render those page who has 'mathjax: true' in Front Matter.
# If you set it to false, it will load mathjax/katex srcipt EVERY PAGE.
per_page: true
engine: mathjax
#engine: katex- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
還需要在文章的Front-matter裡開啟mathjax開關，如下：
---
title: index.html
date: 2018-07-05 12:01:30
tags:
mathjax: true
--- 1
- 2
- 3
- 4
- 5
- 6
之所以要在文章頭裡設定開關，是因為考慮只有在用到公式的頁面才載入 Mathjax，這樣不需要渲染數學公式的頁面的訪問速度就不會受到影響了。
本人獨立部落格：MrYx
本人GitHub：MrYX
歡迎大家一起交流學習。