数学公式前端库MathJax的配置

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

引入

你可以根据服务端和客户端的网络状况选择合适的 CDN 服务器来引入。

官方 CDN

<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

BootCDN

<script type="text/javascript" async src="https://cdn.bootcss.com/mathjax/2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

感谢国内免费 CDN 服务:BootCDN

有问题?

“?config=”是什么

详情在文后有提到。

“async”是什么

这是个 <script> 标签的属性,表示异步执行该脚本。仅对有 src 属性的脚本有作用,也就是说对内联脚本(无 src 属性的)无作用。

配置

引入 MathJax 之后,就可以配置它了。

官方文档中提到,主要可以通过使用外联配置文件和在 <script> 中内联配置两种方法来配置。

外联配置

你可能已经注意到,在其他的 MathJax 配置教程引入库的代码中,链接后都带有一个 ?config= 参数,而参数值在许多教程里各不相同。比如这样:https://cdn.bootcss.com/mathjax/2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML

这个参数其实就是指定预编译的配置文件的,那么这个参数值有有何不同呢?

大概有这么几种参数值(配置文件):

  • TeX-MML-AM_CHTML
  • TeX-MML-AM_HTMLorMML
  • TeX-MML-AM_SVG
  • TeX-AMS-MML_HTMLorMML
  • TeX-AMS_CHTML
  • TeX-AMS_SVG
  • TeX-AMS_HTML
  • TeX-AMS-MML_SVG
  • MML_CHTML
  • MML_SVG
  • MML_HTMLorMML
  • AM_CHTML
  • AM_SVG
  • AM_HTMLorMML
  • default

每个预编译的配置文件都会加载特定的预处理器、输入处理器、输出处理器和扩展。另外,如果你把它指定为 default 的话,它就会加载几乎所有的配置以及解释器,然后就可以自己定制。你还可以通过在配置末尾加上“-full”来加载完整版(对应的标准版不加载实现代码),不过对于偶尔使用一下就没有必要了。

这里使用的 TeX-AMS-MML_HTMLorMML 等同于内联配置中的:

MathJax.Hub.Config({config: ["MMLorHTML.js"],
    jax: ["input/TeX","input/MathML","output/HTML-CSS","output/NativeMML", "output/PreviewHTML"],
    extensions: ["tex2jax.js","mml2jax.js","MathMenu.js","MathZoom.js", "fast-preview.js", "AssistiveMML.js", "a11y/accessibility-menu.js"],
    TeX: {extensions: ["AMSmath.js","AMSsymbols.js","noErrors.js","noUndefined.js"]
    }
});

因此,你也可以直接在内联配置中配置。

内联配置

你需要在 MathJax.Hub.Config() 函数中加载配置。

你还需要在包含 MathJax.Hub.Config()<script>标签上带上type="text/x-mathjax-config"

需要注意的是,这个配置的 <script> 必须放在引入的 <script> 之前。

也就是这样:

<script type="text/x-mathjax-config">
    MathJax.Hub.Config();
</script>
<script type="text/javascript" async src="https://cdn.bootcss.com/mathjax/2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

详细配置说明

MathJax.Hub.Config({
    showProcessingMessages: false, // 关闭 js 加载过程信息
    messageStyle: "none", // 不显示信息
    extensions: ["tex2jax.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {inlineMath: [["$", "$"]], // 行内公式选择 $
        displayMath: [["$$", "$$"]], // 独立段落公式选择 $$
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code', 'a'], // 避开某些标签
        processEscapes: true
    },
    "HTML-CSS": {availableFonts: ["STIX", "TeX"], // 可选字体
        showMathMenu: false // 关闭右击菜单显示
    },
    TeX: {extensions: ["AMSmath.js", "AMSsymbols.js", "extpfeil.js", "mhchem.js"] // 一些写化学式的包
    },
    CommonHTML: {matchFontHeight: false}
});

大概如图所示了,你可以自行修改。

更多的优化配置

约束识别范围

目的是只让脚本识别 WordPress 文章内容里的公式识别符。

首先获取当前文章 id,赋值给变量mathId

var mathId = document.getElementById("post-content");

然后在配置 MathJax.Hub.Config() 之后加上:

MathJax.Hub.Queue(["Typeset",MathJax.Hub,mathId]);

意思就是只在 id 为 post-content 的标签内去识别。

你也可以在 MathJax.Hub.Config() 里加上:

skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code','a']

意思就是不识别这些标签里的文本。

去除公式周围的蓝框

css 里加上:

.MathJax{outline:0;}

注意事项

以上配置仅作参考,请根据自己的实际情况选择。

兼容性问题

getElementById()的传入参数需要根据自己的实际情况选择,大概是把需要渲染的标签 id 输入即可。

比如这个示例,WordPress 的正文部分的标签 id 大概是“post-57”,“57”即为文章 id。所以需要先 document.getElementById("post-content") 获取一下。

var mathId = document.getElementById("post-content"); // 获取当前文章 id
window.MathJax.Hub.Queue(["Typeset", MathJax.Hub, document.getElementById(mathId)]); // 如果不传入第三个参数,则渲染整个 document

最后

<link rel="dns-prefetch" href="https://cdn.bootcss.com" />
<link rel="dns-prefetch" href="https://cdn.mathjax.org" />
<script type="text/x-mathjax-config">
    var mathId = document.getElementById("post-content"); // 选择公式识别范围
    MathJax.Hub.Config({
        showProcessingMessages: false, // 关闭 js 加载过程信息
        messageStyle: "none", // 不显示信息
        extensions: ["tex2jax.js"],
        jax: ["input/TeX", "output/HTML-CSS"],
        tex2jax: {inlineMath:  [ ["$", "$"] ], // 行内公式选择 $
            displayMath: [ ["$$","$$"] ], // 段内公式选择 $$
            skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code','a'], // 避开某些标签
            processEscapes: true
        },
        "HTML-CSS": {availableFonts: ["STIX","TeX"], // 可选字体
            showMathMenu: false // 关闭右击菜单显示
        },
        TeX: {extensions: ["AMSmath.js","AMSsymbols.js","extpfeil.js","mhchem.js"] // 化学式
        },
        CommonHTML: {matchFontHeight: false}
    });
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,mathId]);
</script>
<script data-no-instant>
    InstantClick.on('change', function (isInitialLoad) {if (isInitialLoad === false) {if (typeof MathJax !== 'undefined') {var mathId = document.getElementById("post-content");
                MathJax.Hub.Queue(["Typeset", MathJax.Hub, mathId]);
            }
        }
    });
    InstantClick.init();
</script>
<script type="text/javascript" async
    src="https://cdn.bootcss.com/mathjax/2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

参见

MathJax 官网

MathJax | Beautiful math in all browsers.

CDN 来源

BootCDN – Bootstrap 中文网开源项目免费 CDN 加速服务

部分代码参考

MathJax Documentation — MathJax 2.7 documentation

前端整合 MathjaxJS 的配置笔记 2017-02-20

MathJax: 让前端支持数学公式 2018-10-04

其他

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script#%E5%B1%9E%E6%80%A7

正文完
 0
David Ye
版权声明:本站原创文章,由 David Ye 于2020-04-11发表,共计4482字。
转载说明:
本文(除特殊标明的作品外)采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。
知识共享许可协议
评论(没有评论)
验证码