MathJax:让前端支持数学公式

博主使用Vue开发的个人博客,博文使用markdown语法编写,然后交给前端渲染。为了更方便的进行说明和讲解,需要前端支持LaTex的数学公式,并且渲染好看的样式

背景

博主使用Vue开发的个人博客,博文使用markdown语法编写,然后交给前端渲染。为了更方便的进行说明和讲解,需要前端支持LaTex的数学公式,并且渲染好看的样式

效果展示

数学公式分为行内公式和跨行公式,当然都需要支持和渲染。

我准备了 3 条公式,分别是行内公式、跨行公式和超长的跨行公式:

$\alpha+\beta=\gamma$

$$\alpha+\beta=\gamma$$

$$\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}$$

这篇测试文章的地址是:https://godbmw.com/passage/12。效果图如下所示:

使用 MathJax

引入 CDN

在使用 MathJax 之前,需要通过 CDN 引入, 在标签中添加:

配置 MathJax

将 MathJax 的配置封装成一个函数:

let isMathjaxConfig = false; // 防止重复调用Config,造成性能损耗

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; //
};

使用 MathJax 渲染

MathJax 提供了window.MathJax.Hub.Queue来执行渲染。在执行完文本获取操作后,进行渲染操作:

if (isMathjaxConfig === false) {
    // 如果:没有配置MathJax
    initMathjaxConfig();
}

// 如果,不传入第三个参数,则渲染整个document
// 因为使用的Vuejs,所以指明#app,以提高速度
window.MathJax.Hub.Queue([
    "Typeset",
    MathJax.Hub,
    document.getElementById("app")
]);

修改默认样式

MathJax默认样式在被鼠标focus的时候,会有蓝色边框出现。对于超长的数学公式,x 方向也会溢出。

添加以下样式代码,覆盖原有样式,从而解决上述问题:

/* MathJax v2.7.5 from 'cdnjs.cloudflare.com' */
.mjx-chtml {
    outline: 0;
}
.MJXc-display {
    overflow-x: auto;
    overflow-y: hidden;
}

注意事项

不要使用npm

不要使用 npm,会有报错,google 了一圈也没找到解决方案,github 上源码地址有对应的issue还没解决

博主多次尝试也没有找到解决方法,坐等版本更新和大神指点。

动态数据

在 SPA 单页应用中,数据是通过Ajax获取的。此时,需要在数据获取后,再执行渲染

如果习惯es5,可以在回调函数中调用window.MathJax.Hub.Queue。但是更推荐es6,配合Promiseasync/await来避免“回调地域”。

版本问题

对于不同版本或者不同 CDN 的MathJax,第二部分的样式覆盖的class名称不同。比如在cdnbootv2.7.0版本中,样式覆盖的代码应该是下面这段:

/* MathJax v2.7.0 from 'cdn.bootcss.com' */
.MathJax {
    outline: 0;
}
.MathJax_Display {
    overflow-x: auto;
    overflow-y: hidden;
}

更多资料

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×