MathJax: 讓前端支持數學公式
文章圖片存儲在GitHub，網速不佳的朋友，請看《MathJax：讓前端支持數學公式》 或者 來我的技術小站 godbmw.com
1. 必須要說
1.1 開發背景
博主使用Vue開發的個人博客，博文使用markdown語法編寫，然後交給前端渲染。為了更方便的進行說明和講解，需要前端支持LaTex的數學公式，並且渲染好看的樣式。
1.2 效果展示
數學公式分為行內公式和跨行公式，當然都需要支持和渲染。
我準備了3條公式，分別是行內公式、跨行公式和超長的跨行公式：
$\alpha+\beta=\gamma$ $$\alpha+\beta=\gamma$$ $$\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}$$
這篇測試文章的地址是:https://godbmw.com/passage/12。效果圖如下所示：
2. 使用MathJax
2.1 引入CDN
在使用MathJax之前，需要通過CDN引入, 在<body>標簽中添加：
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>。
2.2 配置MathJax
將MathJax的配置封裝成一個函數：
let isMathjaxConfig = false; // 防止重復調用Config，造成性能損耗 const initMathjaxConfig = () => { if (!window.MathJax) { return; } window.MathJax.Hub.Config({ showProcessingMessages: false, //關閉js加載過程信息 messageStyle: "none", //不顯示信息 jax: ["input/TeX", "output/HTML-CSS"], tex2jax: { inlineMath: [["$", "$"], ["\\(", "\\)"]], //行內公式選擇符 displayMath: [["$$", "$$"], ["\\[", "\\]"]], //段內公式選擇符 skipTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"] //避開某些標簽 }, "HTML-CSS": { availableFonts: ["STIX", "TeX"], //可選字體 showMathMenu: false //關閉右擊菜單顯示 } }); isMathjaxConfig = true; // };
2.3 使用MathJax渲染
MathJax提供了window.MathJax.Hub.Queue來執行渲染。在執行完文本獲取操作後，進行渲染操作：
if (isMathjaxConfig === false) { // 如果：沒有配置MathJax
initMathjaxConfig();
}
// 如果，不傳入第三個參數，則渲染整個document
// 因為使用的Vuejs，所以指明#app，以提高速度
window.MathJax.Hub.Queue(["Typeset", MathJax.Hub, document.getElementById('app')]);2.4 修改默認樣式
MathJax默認樣式在被鼠標focus的時候，會有藍色邊框出現。對於超長的數學公式，x方向也會溢出。
添加以下樣式代碼，覆蓋原有樣式，從而解決上述問題：
/* MathJax v2.7.5 from 'cdnjs.cloudflare.com' */
.mjx-chtml {
outline: 0;
}
.MJXc-display {
overflow-x: auto;
overflow-y: hidden;
}3. 註意事項
3.1 不要使用npm
不要使用npm，會有報錯，google了一圈也沒找到解決方案，github上源碼地址有對應的issue還沒解決。
博主多次嘗試也沒有找到解決方法，坐等版本更新和大神指點。
3.2 動態數據
在SPA單頁應用中，數據是通過Ajax獲取的。此時，需要在數據獲取後，再執行渲染。
如果習慣es5，可以在回調函數中調用window.MathJax.Hub.Queue。但是更推薦es6，配合Promise和async/await來避免“回調地域”。
3.3 版本問題
對於不同版本或者不同CDN的MathJax，第二部分的樣式覆蓋的class名稱不同。比如在cdnboot的v2.7.0版本中，樣式覆蓋的代碼應該是下面這段：
/* MathJax v2.7.0 from 'cdn.bootcss.com' */
.MathJax {
outline: 0;
}
.MathJax_Display {
overflow-x: auto;
overflow-y: hidden;
}4. 更多資料
- 前端整合MathjaxJS的配置筆記
- Mathjax官網
- Mathjax中文文檔
MathJax: 讓前端支持數學公式