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

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

如何仅通过 javascript 单击而不是加载时触发 MathJax。
如何告诉 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>

如何触发 MathJax？

How to trigger MathJax?

javascript

mathjax

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

2。我怎样才能告诉 MathJax 将格式化的元素放在页面的末尾而不是替换原始代码？