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

问题描述

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

我有一大段 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 路径也将具有挑战性。有人可以推荐一种可靠的方法，在将 codeOut 分配给 innerHTML 之前通过 MathJax 传递它吗？

输入代码如下（如果相关）。

<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>

解决方法

根据 official documentation，如果您的页面包含动态内容，例如您的情况，则需要使用 typeset

你试过 MathJax.typeset() 吗？

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

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

额外的info here

html javascript mathjax