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

1、前言

　　最近公司的一个项目需求是在前端显示Latex转化的数学公式，经过不断的百度和测试已基本实现。现在此做一个记录。

2、MathJax介绍

　　MathJax是一款运行在浏览器中的开源的数学符号渲染引擎，使用MathJax可以方便的在浏览器中显示数学公式，不需要使用图片。目前，MathJax可以解析Latex、MathML和ASCIIMathML的标记语言。(Wiki)

3、步骤

　　

3.1、引入MathJax

　在使用MathJax之前，需要通过CDN引入, 在标签中添加，该语句导入的是国内的CDN。vue项目则放在index.ejs下

 //引入速度更快

　结合上面引入，在index.ejs下可以直接初始化

 

3.2、配置MathJax，封装globalVariable.js文件

let isMathjaxConfig = false;//用于标识是否配置
const initMathjaxConfig = () => {
    if (!window.MathJax) {
        return;
    }
    window.MathJax.Hub.Config ({
        extensions: ["tex2jax.js"],
        jax: ["input/TeX", "output/HTML-CSS"],
        showMathMenu: false,
        tex2jax: {
            inlineMath: [['$', '$'], ["\\(", "\\)"]],
            displayMath: [['$$', '$$'], ["\\[", "\\]"]],
            processEscapes: true
        },
        "HTML-CSS": {availableFonts: ["TeX"]},
    });
    isMathjaxConfig = true; //配置完成，改为true
};

const MathQueue = function (elementId) {
    if (!window.MathJax) {
        return;
    }
    window.MathJax.Hub.Queue (["Typeset", window.MathJax.Hub]); //整个dom下渲染
    // window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub, document.getElementById(elementId)]); //固定id元素渲染，
};

export default {
    isMathjaxConfig,
    initMathjaxConfig,
    MathQueue
}

3.3、在main.js中引入并全局使用

import globalVariable from './components/config/globalVariable';
Vue.prototype.commonsVariable = globalVariable;

3.4、需要渲染的页面调用

在渲染列表方法结束之后，直接调用下面方法即可

let _this = this;
setTimeout(function () {
     if(_this.commonsVariable.isMathjaxConfig){//判断是否初始配置，若无则配置。
            _this.commonsVariable.initMathjaxConfig();
     }
     _this.commonsVariable.MathQueue("searchTextJson");//传入组件id，让组件被MathJax渲染
},500);

比如f的平方,效果图如下：

4. 更多资料

• 前端整合MathjaxJS的配置笔记 : https://www.linpx.com/p/front-end-integration-mathjaxjs-configuration.html
• Mathjax官网 : https://www.mathjax.org/
• Mathjax中文文档 : https://mathjax-chinese-doc.readthedocs.io/en/latest/

 

交流
可添加qq群共同进阶学习： 进军全栈工程师疑难解  群号:   856402057

对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！欢迎关注公众号共同学习。