让Mathjax关闭自动渲染的方法，或局部渲染

发表于 更新于 分类于 ， ，

MathJax是一个非常不错的数据公式渲染插件，解决了让数学公式在网页上面显示的需求，官网地址为： https://www.mathjax.org/

在使用MathJax的过程当中也遇到了许多的问题。

加上我英语水平也有限，官网的全英文文章看的也很懵逼，下面说说我在项目中遇到的问题以及我的解决方案：

MathJax局部渲染

用过MathJax的都知道，引入MathJax之后会全局渲染网页当中所有的数学公式，并且在使用require进行模块化开发的时候，异步加载的数据在复制到HTML当中后都会被转换（原因可能是本地调试环境数据加载很快，或是MathJax有延迟或者同是异步加载配置项？）

既然有问题就得解决，以下是两种解决思路：

  1. 参考下面所说的MathJax针对异步数据重新渲染，既然可以重新渲染，那么最直截了当的办法就是如何让MathJax在脚本载入之后不对页面内容进行渲染。而且我想应该也有这个配置或者方法能做到，但很可惜，因为英语水平有限无奈并没有找到关于这个配置的描述。
  2. 无法关闭全局渲染，是否可以指定某个DOM容器进行渲染呢？很幸运在官方文档中我找到了相关的描述，参考如下： http://docs.mathjax.org/en/latest/options/hub.html

The Core Configuration Options

elements: []

This is a list of DOM element ID’s that are the ones to process for mathematics when any of the Hub typesetting calls (Typeset(), Process(), Update(), etc.) are called with no element specified, and during MathJax’s initial typesetting run when it starts up. This lets you restrict the processing to particular containers rather than scanning the entire document for mathematics. If none are supplied, the complete document is processed.

大意是说配置了这个之后，MathJax便只会对这里指定的特定容器进行渲染，如果没有指定，便会渲染整个文档。

到这里就完美解决了开头描述的问题了，通过指定要渲染的部分即可实现局部渲染，例如：

1
2
3
MathJax.Hub.Config({
  elements: [document.getElementById('jax')];
});

但如果针对页面有多个指定的容器需要渲染，那么通过ID一个个设置就显得非常繁琐了。

因为参数要求的是数组，而NodeList对象也算是一种数组，于是我尝试了一下：

1
elements: [document.querySelectorAll('.jax')];

结果很完美，至此这个问题便算是完美解决了。

MaxthJax 关闭自动渲染

那么如果做到上面说到的第一种思路让MathJax载入之后不渲染任何公式呢，其实变通一下办法非常简单，注意上面官方文档最后一句：This lets you restrict the processing to particular containers rather than scanning the entire document for mathematics.

如果配置了就只会对指定的这些容器进行渲染，那么如果选择一个不存在文档的容器就解决了，虽然这并不能算是一个完美的解决方案。如下：

1
elements: ['']

针对异步数据重新渲染

稍微跑个题，也是与MathJax渲染有关的，便是有一些数据是异步加载的并非文档载入就有的，MathJax可能不会对其进行渲染，那么就需要手动调用重新渲染的方法Typeset，只需要在异步数据加载完成或者其他数据修改内容事件之后执行以下代码即可：

1
MathJax.Hub.Typeset(document.getElementById('jax'));

这个是我在官方文档找到的方法，与百度上搜索到的千篇一律好几行代码，这样更加简单、方便和直接。