vue中使用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>

创建js文件用于配置公式

let isMathjaxConfig = false;//用于标识是否配置
// window.MathJax = MathJax;
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,
}

vue组件

<template>
    <div> 
      <div class="mathJaxFont" v-html="formula"></div>
    </div>
</template>

<script>
    import MathJax from '../utils/MathJax';
    export default {
        data() {
            return {
               formula:"$$R_{再生水}=\\sum_{j=1}^{n}(Q_{j再生水}-Q_{j再生水上年})\\times C_{ji当年}\\times10^{-2}$$",
            };
        },
        created() {
            this.formatMath();
        },
        methods: {
			formatMath() {
                let that = this;
                setTimeout(function () {
                    that.$nextTick(function () {
                        if (MathJax.isMathjaxConfig) {//判断是否初始配置，若无则配置。
                            MathJax.initMathjaxConfig();
                        }
                        MathJax.MathQueue("hello");//传入组件id，让组件被MathJax渲染
                    })
                }, 200);
            },
        },
        mounted() {
        }

    }
</script>

<style  scoped lang="less">
            .mathJaxFont {
                font-size: 18px;
                margin: 16px;
                width: max-content;

                /deep/ .MJXc-display {
                    text-align: left !important;
                }
            }
</style>