更新 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 的返回值咯 ~

参考

版权声明：本文是原创文章，版权归无限UCW 所有。
本文链接：https://ucw.moe/archives/upgrade-mathjax-to-v3.html
本站所有原创文章采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。
您可以自由地转载和修改，但请务必注明文章来源并且不可用于商业目的。

发表评论取消回复

评论 *

私密评论

名称 *

邮箱 *

地址

5 条评论

Javi
2020 年 11 月 07 日

最新版 Handsome 已经支持 Mathjax3 惹。

回复
怪使
2020 年 07 月 24 日

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

回复
Akara
2020 年 04 月 25 日

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

回复
1. 无限UCWBlog Master
  2020 年 04 月 28 日
  
  @Akara
  其实我前端魔改的部分不多，侧栏部分的修改已经整理过了教程，剩下就是一部分细节，以后可能会考虑写一写？
  
  回复
爬虫
2020 年 04 月 17 日

给苣佬暖说说
版权声明：本文是原创文章，版权归无限UCW 所有。
本文链接：https://ucw.moe/archives/upgrade-mathjax-to-v3.html
本站所有原创文章采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。
您可以自由地转载和修改，但请务必注明文章来源并且不可用于商业目的。

回复