在vue中使用mathjax渲染latex数学公式

第一步 在public index.js中引入 mathjax

<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>

第二步 创建 mathjax.js 文件

// 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.getElementsByClassName(elementId)]) // 根据class
  window.MathJax.Hub.Queue(['Typeset', window.MathJax.Hub, document.getElementById(elementId)]) // 根据id
}

export default {
  isMathjaxConfig,
  initMathjaxConfig,
  MathQueue
}

第三步 在main.js 中引入

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

第四步 创建可复用的子组件 gs.vue

<template>
  <div class="latexDiv" v-html="'$$'+latex+'$$'" />
</template>

<script>
import MathJax from '@/MathJax.js'
export default {
  name: 'TheLatex2Math',
  props: { latex: { type: String, default: '' }},
  watch: { // 监视latex的变化
    latex() {
      this.mathJax()
    }
  }, // 限制父子组件参数为String
  created() { // 组件刚创建的时候，watch并不会被触发，因为latex值没发生变化
    this.mathJax()
  },
  methods: {
    mathJax () {
      this.$nextTick(function () { // Vue的DOM渲染是异步的
        if (MathJax.isMathjaxConfig) { // 是否配置MathJax
          MathJax.initMathjaxConfig()
        }
        MathJax.MathQueue('latexDiv') // 渲染对应的id/class
      })
    }
  }
}
</script>

第五步 引入使用

<template>
  <div class="flex-item">
  	<TheLatex2Math :latex="gs" />
  </div>
</template>
import TheLatex2Math from './gs.vue'
export default {
  components: {
    TheLatex2Math
  },
  data(){
  return {
		gs: 'P_{待估} = \\frac{1/a}{1/a+1/b+1/c}*P_A+\\frac{1/b}{1/a+1/b+1/c}*P_B+\\frac{1/c}{1/a+1/b+1/c}*P_C',
	}
  }
}

效果展示

注意点： 由于动态赋值latex写法中单斜杠会不能识别，所以转为双斜杠