如何触发 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. 如何仅通过单击 javascript 而不是加载时触发 MathJax。
2. 如何告诉MathJax 将格式化元素放在页面末尾而不是替换原始代码？

Answer 1

1。如何仅通过单击 javascript 而不是加载时触发 MathJax。

来自docs： skipStartupTypeset: false

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

---

Starting typeset

MathJax.Hub.Typeset() 命令还接受一个参数，该参数是 内容要排版的 DOM 元素。那可能是一个段落， 或者一个元素，甚至是一个 MathJax 数学标签。它还可以 是此类对象的 DOM id，在这种情况下，MathJax 将查找 给你的 DOM 元素。所以

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

将排版包含在 id 为的元素中的数学 数学示例。这相当于

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 preprocessors configs：

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>