MathJax: 讓前端支援數學公式
文章圖片儲存在 GitHub
,網速不佳的朋友,請看 ofollow,noindex" target="_blank">《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; }