javascript - 如何触发 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

Normally MathJax will typeset the mathematics on the page as soon as the page is loaded. If you want to delay that process, in which case you will need to call MathJax.Hub.Typeset() yourself by hand, set this value to true.

---

Starting typeset

The MathJax.Hub.Typeset() command also accepts a parameter that is a DOM element whose content is to be typeset. That could be a paragraph, or a element, or even a MathJax math tag. It could also be the DOM id of such an object, in which case, MathJax will look up the DOM element for you. So

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

would typeset the mathematics contained in the element whose id is MathExample. This is equivalent to

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

If no element or element id is provided, the whole document is typeset.

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>