如何在使用 MathJax 更新 innerHTML 之前通过 MathJax 提供输出字符串

Question

我知道之前有人问过这个问题，但我无法朝着功能性解决方案迈出一步。

我有一大段 Javascript 代码可以处理一些输入方程并输出方程的分步解。因此，用户将等式输入到一个框中，然后单击一个按钮，它会触发以下代码中的事件：

function getInputValue() {
  let inputVal = document.getElementById('myInput').value;
  codeOut = '';
  // Function which appends to codeOut throughout its stages
  UncPropSteps(inputVal);
  document.getElementById('MathOutput').innerHTML = codeOut;
}

这正确地将输出阶段分配给那个 'MathOutput' 框，但没有任何 MathJax 格式，因为它已经完成了对页面的初始扫描。我已经尝试过我在网上找到的其他功能来刷新特定元素，我已经尝试过 MathJax.Hub.Queue(["Typeset",MathJax.Hub,"MathOutput"]);，但我就是无法让 MathJax 尝试刷新。输出可能最终会扩展到相当多的行，因此尝试找到 LaTeX -> Image -> URL -> src 路径也将具有挑战性。谁能推荐一种可靠的方法，在将代码分配给 innerHTML 之前通过 MathJax 传递 codeOut？

输入代码如下，如果相关的话。

<div class="wrapper">
  <input type="text" placeholder="Type something..." id="myInput" size="70">
  <button class="button" onclick="getInputValue()">Propagate!</button>
  <button class="button" onclick="clearBox()">Clear</button>
  <p id="MathOutput">[Numeric solution will come out here!]</p>
</div>

Answer 1

根据 official documentation，如果您的页面有像您这样的动态内容，则需要使用 typeset

你试过了吗MathJax.typeset()？

如果您需要异步执行此操作

MathJax.typesetPromise().then(() => {
  // modify the DOM here
  MathJax.typesetPromise();
}).catch((err) => console.log(err.message));

额外info here

如何在使用 MathJax 更新 innerHTML 之前通过 MathJax 提供输出字符串

How to feed output string through MathJax prior to updating innerHTML with it

html

javascript

css

mathjax