Vue使用MathJax动态识别数学公式

1、MathJax介绍

MathJax是一款运行在浏览器中的开源的数学符号渲染引擎，使用MathJax可以方便的在浏览器中显示数学公式，不需要使用图片。

2、步骤

 2.1引入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>

2.2、创建方法配置MathJax

  引入MathJax之后就需要我们配置MathJax了，这是为了让MathJax可以通过配置的标识来识别要被转化的数学公式

  （1）创建globalVariable.js文件，并在里面写下配置方法

   l

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
};
//这一步不一定用传入id的方式，也可以传入标签name用getElementByName来获取组件对象

const MathQueue = function (elementId) {
    if (!window.MathJax) {
        return;
    }
    window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub, document.getElementById(elementId)]);
};

export default {
    isMathjaxConfig,
    initMathjaxConfig,
    MathQueue
}

（2)在main.js中将globalVariable.js引入，这样就可以在项目内任何地方都可以使用了

import globalVariable from './components/globalVariable/globalVariable‘

Vue.prototype.commonsVariable=globalVariable;

2.3创建方法渲染公式

（1）在需要渲染的页面中调用方法即可。当vue数据改变的时候，我们使用$nextTick等待组件数据渲染完成后，再将组件id传入方法中，让mathjax来渲染公式

<template>
    <div> 
       <div id="question-id">
            <div class="swappy-radios" >
                <div name="titleDiv">
                    <h3> 题目：<span v-html="questionToOptions.Question.body"></span> </h3> //这里的questionToOptions.Question.body传入的就是Latex公式
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            value: {}
        },
        data() {
            return {
                rawHtml:'',
                heightString: 'height: 500px;',
                questionToOptions: this.value,
                answer: '',
                imgIndex: 0,
            };
        },
        methods: {

        },
        watch: {
            //监听prop传的value，如果父级有变化了，将子组件的myValue也跟着变，达到父变子变的效果
            //这里看需求，若不使用监听，直接放在axios请求方法中也是可以的
            value(value) {
                // titleDiv
                this.questionToOptions = value;
                this.answer = '';
                this.$nextTick(function () { //这里要注意，使用$nextTick等组件数据渲染完之后再调用MathJax渲染方法，要不然会获取不到数据
                    if(this.commonsVariable.isMathjaxConfig){//判断是否初始配置，若无则配置。
                        this.commonsVariable.initMathjaxConfig();
                    }
                    this.commonsVariable.MathQueue("question-id");//传入组件id，让组件被MathJax渲染
                })
            },
            answer(newVal) {
                this.$emit('trouble', newVal)
            }
        },
        mounted() {
        }

（2)上面代码是通过监听Value值变化才会触发渲染，也可以写当页面加载的时候渲染标签

mounted(){

this.$nextTick(function () { //这里要注意，使用$nextTick等组件数据渲染完之后再调用MathJax渲染方法，要不然会获取不到数据
                    if(this.commonsVariable.isMathjaxConfig){//判断是否初始配置，若无则配置。
                        this.commonsVariable.initMathjaxConfig();
                    }
                    this.commonsVariable.MathQueue("question-id");//传入组件id，让组件被MathJax渲染
                })

}