MathJax: 讓前端支持數學公式

時間 2019-11-15

標籤 mathjax 前端支持數學公式欄目應用數學简体版

原文原文鏈接

文章圖片存儲在GitHub，網速不佳的朋友，請看《MathJax：讓前端支持數學公式》或者來個人技術小站 godbmw.comjavascript

1. 必需要說

1.1 開發背景

博主使用Vue開發的我的博客，博文使用markdown語法編寫，而後交給前端渲染。爲了更方便的進行說明和講解，須要前端支持LaTex的數學公式，而且渲染好看的樣式。css

1.2 效果展現

數學公式分爲行內公式和跨行公式，固然都須要支持和渲染。html

我準備了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。效果圖以下所示：
java

2. 使用MathJax

2.1 引入CDN

在使用MathJax以前，須要經過CDN引入, 在<body>標籤中添加：
` <script type="text/javascript" async src="https://cdnjs.cloudflare.com/...;></script>
`。git

2.2 配置MathJax

將MathJax的配置封裝成一個函數：es6

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來執行渲染。在執行完文本獲取操做後，進行渲染操做：github

if (isMathjaxConfig === false) { // 若是：沒有配置MathJax
  initMathjaxConfig();
}

// 若是，不傳入第三個參數，則渲染整個document
// 由於使用的Vuejs，因此指明#app，以提升速度
window.MathJax.Hub.Queue(["Typeset", MathJax.Hub, document.getElementById('app')]);

2.4 修改默認樣式

MathJax默認樣式在被鼠標focus的時候，會有藍色邊框出現。對於超長的數學公式，x方向也會溢出。ajax

添加如下樣式代碼，覆蓋原有樣式，從而解決上述問題：npm

/* 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. 更多資料

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。