Vue + mathjax动态识别数学公式

Vue + mathjax动态识别数学公式

一.引入MathJax

在index.html中加入下面语句即可引入MathJax，该语句导入的是国内的CDN

<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

在src的componments下创建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", "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(elementId)]);
};


export default {
    
    
    isMathjaxConfig,
    initMathjaxConfig,
    MathQueue,
}

三.创建方法渲染公式

在main.js中将globalVariable.js引入

//引入mathJax组件及配置
import globalVariable from './components/config/globalVariable.js'
Vue.prototype.globalVariable = globalVariable

当vue数据改变的时候，将组件id传入方法中，让mathjax来渲染公式

<template>
  <div class="main">
    <el-button v-on:click="confirm" type="success" round>$$x^2-6x+11-\frac{
    
    6}{
    
    x}=0$$</el-button>
     <div id="KatexData">
      <span  class="ql-formula" id="ShowLatexData">{
    
    {
    
    resultData}}</span>
  </div>
  </div>
</template>

<script>
 
  export default {
    
    
    data() {
    
    
      return {
    
    
       resultData:''
      }
    },
    methods: {
    
    
    ZhMathJax:function(Id){
    
    
            let _this = this;
              setTimeout(function () {
    
    
                if(_this.globalVariable.isMathjaxConfig==false){
    
    //判断是否初始配置，若无则配置。
                   _this.globalVariable.initMathjaxConfig();
                }
                  _this.globalVariable.MathQueue(Id);//传入组件id，让组件被MathJax渲染
                },500)
    },
  confirm:function(){
    
    
          //每次点击先清空上次显示的latex公式
          document.getElementById("ShowLatexData").innerHTML= "";
            //var latexData="$$\left\{\begin{array}{l}x^2-2 x-3=0 \\ x+2=1\end{array}\right.$$"
            //由于动态赋值单斜杠会不能识别，所以转移双斜杠   但是从后台拿取的数据可以直接赋值渲染
            var latexData="$$\\left\\{\\begin{array}{l}x^2-2 x-3=0 \\\\ x+2=1\\end{array}\\right.$$"
            // this.$axios.post('mathAnalysisOne',{sectiontext:latexData}).then(successResponse=>{
    
    
            //     console.log(successResponse.data)
            //     console.log(successResponse.data.answer[0])
                document.getElementById("ShowLatexData").innerHTML= latexData;
                this.ZhMathJax("KatexData");
            // }).
            // catch();
  },
    }
  }
</script>