在vue中渲染數學公式 - MathJax

1.開發背景

目前在使用 vue + elementui 做一個考試管理系統，在做學生考試頁面時需要用到數學公式，但是背景解析出來後不是圖檔，而且如果是圖檔的話放在題目裡很怪，是以需要使用到 MathJax 去解析背景傳過來的公式

背景傳回的資料：

2.使用MathJax

2.1 引入CDN

在使用MathJax之前，需要通過CDN引入, 在

<body>

标簽中添加：

注意：如果是國内的話建議使用下面的連結

<link rel="dns-prefetch" href="//cdn.bootcss.com" />
<script type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

2.2 配置MathJax

将

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')]);

你也可以在元件中指定 Id 名稱去渲染公式

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

,會出現很多未知問題,而且包的體積很大

如果是

vue

項目,直接在

public

檔案夾的

index

檔案的頭部或者尾部添加

<script>

标簽(CDN連結)

3.2多處使用

如果在很多地方都需要用到

MathJax

,可以在單獨把配置項封裝成一個JS檔案，然後在main.js檔案中導入并注冊為全局JS

JS檔案（globalVariable.js）：

let isMathjaxConfig = false;//用于辨別是否配置
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"] //避開某些标簽
        },
        "HTML-CSS": {
            availableFonts: ["STIX", "TeX"], //可選字型
            showMathMenu: false //關閉右擊菜單顯示
        }
    });
    isMathjaxConfig = true; //配置完成，改為true
};
const MathQueue = function (elementId) {
  if (!window.MathJax) {
      return;
  }
  window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub, document.getElementById(elementId)]);//這裡可以用原生的js調用name,class,id。
};
export default {
  isMathjaxConfig,
  initMathjaxConfig,
  MathQueue,
}

main.js檔案中添加：

import globalVariable from './assets/js/globalVariable'
Vue.prototype.commonsVariable = globalVariable;

使用：如果是

vue

就在

mounted

鈎子函數中寫

this.$nextTick(function () { //這裡要注意，使用$nextTick等元件資料渲染完之後再調用MathJax渲染方法，要不然會擷取不到資料
    if(this.commonsVariable.isMathjaxConfig){//判斷是否初始配置，若無則配置。
        this.commonsVariable.initMathjaxConfig();
    }
    this.commonsVariable.MathQueue("question-id");//傳入元件id，讓元件被MathJax渲染
})

3.3動态資料

在SPA單頁應用中，資料是通過

Ajax

擷取的。此時，需要在資料擷取後，再執行渲染。

如果習慣

es5

，可以在回調函數中調用

window.MathJax.Hub.Queue

。但是更推薦

es6

，配合

Promise

和

async/await

來避免“回調地域”。

3.4第一次不顯示問題，重新整理後顯示

這種何況應該是網速慢是以可以加一個定時器

setTimeout(() => {
            this.$nextTick(function () { //這裡要注意，使用$nextTick等元件資料渲染完之後再調用MathJax渲染方法，要不然會擷取不到資料
                if(this.commonsVariable.isMathjaxConfig){//判斷是否初始配置，若無則配置。
                    this.commonsVariable.initMathjaxConfig();
                }
                this.commonsVariable.MathQueue("question-id");//傳入元件id，讓元件被MathJax渲染
            })
        },1000)

3.4 版本問題

對于不同版本或者不同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. 更多資料

Mathjax官網
Mathjax中文文檔

參考文檔：https://www.cnblogs.com/geyouneihan/p/9743302.html

個人部落格：http://www.aeiherumuh10.com/zeno-blog/

在vue中渲染數學公式 - MathJax