MathJax 3全新版本配置指南

提醒:本文最后更新于 2024-02-11 23:37,文中所关联的信息可能已发生改变,请知悉!

写在前面

忽然发现 MathJax 版本号更新到 3.X 了,而中文互联网是竟然还没多少配置最新版本 MathJax 的相关教程,于是乎我就去官方文档扒了扒。

更新了什么

根据其官方文档的说法,相比于 MathJax 2.X 版本,3.X 版本可谓是变化极大。从在你的网页头部引入配置它的时候,就不再需要引入一个完整的 MathJax.js 文件,还需要加个 ?config= 以使用组合配置了。当你打开某个提供开源前端 CDN 加速服务的网站,会发现 MathJax 有几十个供选择的配置文件,而你只需加载你需要的一个,以避免多个文件传输,还能同步使用。也就是更加 模块化 了。

引入并配置 MathJax 3

引入

刚起步,我们直接在页头脚本处引入最通用但也是最大的一个文件 tex-mml-chtml.js(也可以选择文件名带 .min.js 的压缩后文件)。

<script type="text/javascript" id="MathJax-script" async
  src="https://cdn.bootcdn.net/ajax/libs/mathjax/3.1.2/es5/tex-mml-chtml.min.js">
</script>

配置

现在不能用老版本里 MathJax.Hub.Config({})JSON 一样配置了,而是直接用 MathJax = {}。之后就和老版本一样配置了,我还是按老习惯用美元符号作为分隔符。这里还是用内联脚本的形式配置。

<script>
MathJax = {
  tex: {inlineMath: [['$', '$']], // 行内公式
    displayMath: [['$$','$$']] // 段内公式
  }
  svg: {fontCache: 'global'}
};
</script>

要多来几个分隔符?写成诸如 [['$','$'], ['//','//']] 这样就可以。注意逗号别忘记加。

从旧版本的配置迁移

你不需要重新写一份,官方提供了一个转换工具,只需将原来的配置粘贴,就能得到新版本的配置了。链接在此:

https://mathjax.github.io/MathJax-demos-web/convert-configuration/convert-configuration.html

最终成果:

<link rel="dns-prefetch" href="https://cdn.bootcdn.net" />
<link rel="dns-prefetch" href="https://cdn.mathjax.org" />
<script>
    MathJax = {
        tex: {
            inlineMath: [
                ["$", "$"]
            ], // 行内公式选择 $
            displayMath: [
                ["$$", "$$"]
            ], // 段内公式选择 $$
            processEscapes: true,
            autoload: {color: [],
                colorv2: ['color']
            },
            packages: {'[+]': ['noerrors', 'extpfeil', 'mhchem']
            }
        },
        svg: {fontCache: 'global'}
        options: {skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code', 'a'], // 避开某些标签
            ignoreHtmlClass: 'tex2jax_ignore',
            processHtmlClass: 'tex2jax_process'
        },
        chtml: {matchFontHeight: false},
        loader: {load: ['[tex]/noerrors', '[tex]/extpfeil', '[tex]/mhchem']
        }
    };
</script>
<script type="text/javascript" id="MathJax-script" async
    src="https://cdn.bootcdn.net/ajax/libs/mathjax/3.1.2/es5/tex-mml-chtml.min.js">
</script>
正文完
 0
David Ye
版权声明:本站原创文章,由 David Ye 于2021-01-23发表,共计1660字。
转载说明:
本文(除特殊标明的作品外)采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。
知识共享许可协议
评论(没有评论)
验证码