MthJax+Vue本地离线

vue项目中展示LaTeX数学表达式，首先引入MathJax插件；

tips：MathJax在npm上是有安装包的；查看地址：https://www.npmjs.com/package/mathjax

第一步：安装MathJax

npm install mathjax  

第二步：安装后查看public/index.html是否引入了js及其相关配置，若无手动添加(我是手动添加的)

 

<script type="text/javascript"
          src="http://api.xkw.com/mathjax/MathJax.js?config=TeX-MML-AM_CHTML"></script>

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      jax: ["input/MathML","output/SVG"],
      extensions: ["mml2jax.js","MathEvents.js"],
      tex2jax: {
          inlineMath: [['$','$'], ['\\(','\\)']], // 行内公式选择符$..$
          displayMath: [['$$', '$$'], ['\\[', '\\]']], //段内公式选择符$$..$$
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code', 'a'] // 避开某些标签
      },
      'HTML-CSS': {
          availableFonts: ['STIX', 'TeX'], // 可选字体
          showMathMenu: false // 关闭右击菜单显示
      }
    });
</script>

第三步：在utils下新建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.getElementById('app')])
}

export default {
    isMathjaxConfig,
    initMathjaxConfig,
    MathQueue
}

第四步：在main.js中引用mathjax，全局可用this.MathJax

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

 第五步：在.vue页面中展示，完整代码

<template>
    <div id="hello">
        {{text1}}
        {{text2}}
    </div>
</template>
<script>
    export default {
        name: "app",
        data() {
            return {
                text1:'$$\\Gamma(z) = \\int_0^\\infty t^{z-1}e^{-t}dt\\,.$$',//块级居中
                text2:'$\\sum_{i=0}^N\\int_{a}^{b}g(t,i)\\text{d}t$',//行内显示
                text3:'$$求和:\\sum_{i=1}^n{a_i}$$',
                text4:'$$求积分:\\\\int_0^\\infty{fxdx}$$',
                text5:'$$求积:\\prod_{i=0}^n \\frac{1}{i^2}$$',
                text6 : '$$借款本金=\\sum _{nT}^{i=1}\\frac{第i期支付金额}{1+年化综合成本}$$'
        },
        mounted() {
            
        },
        updated() {
            this.formatMath();
        },
        methods: {
            formatMath() {
                setTimeout(()=>{
                    this.$nextTick(()=>{
                        //判断是否初始配置，若无则配置。
                        if(this.MathJax.isMathjaxConfig){
                            this.MathJax.initMathjaxConfig();
                        }
                        //传入组件id，让组件被MathJax渲染
                        this.MathJax.MathQueue("hello");
                    })
                },500);
            }
        }
}
</script>

效果图：