javascript - 如何通过 JavaScript 动态插入 MathJax (Latex)？

Question

我有一个 LaTeX(我使用 MathJax 来复制)公式，它在 HTML 中完美运行，但是当我尝试通过 .innerHTML 注入(inject)它时，它失败了。

在正常的 HTML 下我得到这个:

但是当我在 JS 中使用这段代码时:

document.getElementById("si_suvat_equation").innerHTML = 
"<span>\begin{gather} s = ut + \frac{1}{2}  at^{2}\\ \notag end{gather}</span>";

然后我得到这个:

那么我如何才能让我注入(inject)的 HTML 看起来像原始 HTML 呢？我假设 JS 正在读取某些内容，就好像它是代码一样，而不是仅仅将其原始注入(inject)。但我不知道如何改变它，所以它只注入(inject)原始代码。

Answer 1

一些要做的事情:

• 在 JavaScript 字符串文字中，反斜杠具有特殊含义。有几种方法可以解决这个问题，但由于在 LaTeX 语法中反斜杠非常常见，因此最好使用 String.raw 以便将反斜杠视为文字反斜杠。

• end{gather} 之前缺少一个反斜杠

• 数学需要用分隔符括起来，默认为 $$。

• MathJax 有一个函数 typeset您可以使用它让MathJax引擎再次处理网页以排版新添加的内容。请注意引用的文档，因为您可能需要使用 typesetPromise 来代替。

这是一个演示，其中静态内容已正确加载，并且应显示动态公式的 div 已使用按钮初始化。当您单击它时，将执行动态代码，然后调用 typeset。正如您所看到的，此动态内容现在也已正确排版:

document.querySelector("button").addEventListener("click", () => {
    document.getElementById("si_suvat_equation").innerHTML = 
String.raw`<span>$$\begin{gather} s = ut + \frac{1}{2}  at^{2}\\ \notag \end{gather}$$</span>`;
    MathJax.typeset();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.js"></script>

<div>$$\begin{gather} s = ut + \frac{1}{2}  at^{2}\\ \notag \end{gather}$$ </div>

<div id="si_suvat_equation"><button>Load</button></div>

此代码片段在“控制台”中显示一条消息，该消息与此堆栈代码片段的沙盒环境相关。它不会在更标准的环境中显示。