vue項目中數學公式的展示

在這里有個mathjax的插件，可以將dom中的數學公式展示。

第一步安裝mathjax

npm install mathjax

安裝完之后，你會在index.html中發現，已經引用了js文件，並且有相關配置

    <script type="text/javascript"
            src="http://api.xkw.com/mathjax/MathJax.js?config=TeX-MML-AM_CHTML"></script>

    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        jax: ["input/MathML","output/SVG"],
        extensions: ["mml2jax.js","MathEvents.js"]
      });

    </script>

並且在utils中多了一個文件MathJax.js

 

 

 MathJax文件內容

export default {
  MathConfig () {
    if (window.MathJax) {
      console.log('rendering mathjax')
      window.MathJax.Hub.Queue(['Typeset', window.MathJax.Hub], () => console.log('done'))
    }
  }
}

再來說一個npm通用的問題，怎么配置，怎么導入

通過在網上半天查詢，終於找到

將MathJax.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', 'code', 'a'] // 避開某些標簽
    },
    '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('app')])
}

export default {
  isMathjaxConfig,
  initMathjaxConfig,
  MathQueue
}

這里做一個簡單說明，Hub.Config中是做一些基本配置，再通過調用Hub.Queue這個方法對dom樹進行渲染。

基本配置搞定，然后將文件導入到main.js中

import MathJax from './utils/MathJax'
Vue.prototype.MathJax = MathJax

接下來就可以使用了

  watch: {
    list: function () {
      this.$nextTick(function () {
        if (this.MathJax.isMathjaxConfig) { // 判斷是否初始配置，若無則配置。
          this.MathJax.initMathjaxConfig()
        }
        this.MathJax.MathQueue()// 傳入組件id，讓組件被MathJax渲染
      })
    }
  }

監聽list是否發生變化，發生變化之后，就在dom渲染完之后，生成試題的正確展示形式