如何触发MathJax？

Question

我包含MathJax在脚本中

<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

这会自动用格式化的标签替换所有数学代码.

1. 如何MathJax仅通过javascript点击触发,而不是在加载时触发.
2. 如何MathJax将格式化元素放在页面末尾而不是替换原始代码？

Answer 1

1.如何仅通过javascript点击触发MathJax,而不是在加载时触发.

来自docs: skipStartupTypeset: false

通常,只要页面加载,MathJax就会在页面上排版数学.如果您想延迟该过程,在这种情况下您需要MathJax.Hub.Typeset()手动调用自己,将此值设置为true.

开始排版

MathJax.Hub.Typeset()命令还接受一个参数,该参数是要对其内容进行排版的DOM元素.这可能是段落,元素,甚至是MathJax数学标记.它也可以是这样一个对象的DOM id,在这种情况下,MathJax会为你查找DOM元素.所以

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

将排版id为MathExample的元素中包含的数学.这相当于

var math = document.getElementById("MathExample");
MathJax.Hub.Queue(["Typeset",MathJax.Hub,math]);

如果未提供元素或元素id,则整个文档是排版的.

MathJax.Hub.Config({
    skipStartupTypeset: true,
    extensions: ["tex2jax.js", "TeX/AMSmath.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
        inlineMath: [["$", "$"]],
        processEscapes: true
    }
});

function startTypeSetting() {
  var HUB = MathJax.Hub;
  HUB.Queue(["Typeset", HUB, "render-me"]);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<p id="render-me">$a+b=c$<p>

<button onClick="startTypeSetting()">Start typesetting</button>

2.如何告诉MathJax将格式化元素放在页面末尾而不是替换原始代码？

最好知道你想要实现什么,但是有两种方法可以跳过某些标签或类的排版,来自tex2jax预处理器配置:

MathJax.Hub.Config({
     tex2jax: {
         skipTags: ["script","noscript","style","textarea","pre","code"],
         ignoreClass: "tex2jax_ignore_1|tex2jax_ignore_2"
    }
}

您可以将要渲染的元素的内容复制到另一个元素,然后在那里开始排版:

MathJax.Hub.Config({
    skipStartupTypeset: true,
    extensions: ["tex2jax.js", "TeX/AMSmath.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
        inlineMath: [["$", "$"]],
        processEscapes: true
    }
});

function startTypeSetting() {
  //copy content from '#code-to-render' to '#render-point'
  var text = $('#code-to-render').val()
  $('#render-point').text(text)
  
  //Start typesetting
  var HUB = MathJax.Hub;
  HUB.Queue(["Typeset", HUB, "render-point"]);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>

<textarea id="code-to-render">$a+b=c$</textarea>
<p id="render-point"></p>

<button onClick="startTypeSetting()">Start typesetting</button>