MathJax vue中使用记

在index.html中引入

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_HTMLorMML-full"></script>

新建一个golbalVariable.js

// 新建一个golbalVariable.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全局引入

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

.vue页面使用

<div>{{math}}</div>

data(){
  return{
    math:'`N=(LBh_1q_1)/1000`'
  }
}
 mounted() {
    this.$nextTick(function() { // 这里要注意，使用$nextTick等组件数据渲染完之后再调用MathJax渲染方法，要不然会获取不到数据
      if (this.commonsVariable.isMathjaxConfig) { // 判断是否初始配置，若无则配置。
        this.commonsVariable.initMathjaxConfig()
      }
      this.commonsVariable.MathQueue('container-table')// 传入组件id，让组件被MathJax渲染
    })
  },

效果图

MathJax 语法参考