更新 Mathjax 至 v3 版本

MathJax 目前已经推出了全新的 v3 版本,使用现代化的编程技巧重写了整个代码,包括 TS、ES6、Promises 等,同时全面采用 jsDelivr 作为默认 CDN 取代原先的 cdn.mathjax.org,在速度上有较大提升(国内尤为明显)。咕咕咕了很久之后我终于下定决心将其更新到了 v3 版本。这篇笔记就来讲解一下从 v2 升级到 v3 的一些快捷方法和注意事项。

这篇笔记针对 Typecho 的 handsome 主题编写,对于其他程序/主题的 MathJax 更新可能仅仅只有启发作用。

生成 v3 配置

MathJax 有一个配置选项,在 v2 系列版本中书写在 <script type="text/x-mathjax-config"> 标记中,例如 handsome 的默认配置是:

MathJax.Hub.Config({messageStyle: "none",tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});

但在 v3 版本中,上述配置格式不再被支持。好在我们可以使用 MathJax 官方推出的工具 MathJax Configuration Converter 来快速生成对应的 v3 配置。

我生成的配置是:

window.MathJax = {
    tex: {
        inlineMath: [['$','$'], ['\\(','\\)']],
        autoload: {
            color: [],
            colorV2: ['color']
        },
        packages: {'[+]': ['noerrors']}
    },
    svg: {
        fontCache: 'global'
    },
    options: {
        ignoreHtmlClass: 'tex2jax_ignore',
        processHtmlClass: 'tex2jax_process'
    },
    loader: {
        load: ['[tex]/noerrors']
    }
};

用 Promises 重写部分内容

笔者使用的 handsome 主题在 pjax 时有一次 MathJax.Hub.Queue(["Typeset",MathJax.Hub,"body"]); 的操作,这种写法不再被 MathJax 支持了,于是笔者参考 Typesetting and Converting Mathematics — MathJax 3.0 documentation 将其重写。重写后实际上更短了:

MathJax.typeset();

简单直接,暴力美学。

如果你的调用更加复杂,请尽可能详细阅读文档再对应作出修改。

替换调用地址

Converter 生成的整个配置是可以直接复制并插入 body 的末尾的,例如一个类似这样的东西:

<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-svg.js" id="MathJax-script"></script>

我的写法是:

<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-svg.js" async></script>

并没有什么明显的区别。插入部署完毕后,来到前端页面 F12 并在 Console 中运行 MathJax.version,就可以看到 3.x.x 的返回值咯 ~

参考

最后修改:2020 年 04 月 11 日 10 : 23 AM
欢迎投食喵 ~

发表评论

5 条评论

  1. Javi

    最新版 Handsome 已经支持 Mathjax3 惹。

  2. 怪使

    大佬好,能不能教一下怎么搞,更新7版本之后mathjax好像GG了。

  3. Akara

    好喜欢博主魔改过的handsome,能整理一篇魔改教程吗

    1. 无限UCW
      @Akara

      其实我前端魔改的部分不多,侧栏部分的修改已经整理过了教程,剩下就是一部分细节,以后可能会考虑写一写?

  4. 爬虫

    给苣佬暖说说

    版权声明:本文是原创文章,版权归 无限UCW 所有。

    本文链接:https://ucw.moe/archives/upgrade-mathjax-to-v3.html

    本站所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
    您可以自由地转载和修改,但请务必注明文章来源并且不可用于商业目的。