如何使用MathJax动态渲染Tex和LaTex公式而不刷新页面？

Question

我有我的html如下：

html prettyprint-override"><textarea id="content"></textarea>
<div id="render"></div>

现在，我使用这个javascript动态更新文本区域中的任何更改：

const input = document.getElementById("content");
const log = document.getElementById("render");
input.addEventListener("input", updateValue);

function updateValue(e) {
    log.textContent = e.target.value;
}

我使用MathJax官方cdn脚本来转换Tex和LaTex公式。脚本工作正常，在页面加载时加载Tex和LaTex代码作为公式。但是，当我在textarea中键入任何代码时，我只会看到相同的Tex或Latex代码。例如，如果我键入\（\alpha\），我可能会在动态呈现文本区域的内容时获得alpha符号，而不是返回相同的文本。我想在他们的mathjax演示页面中看到类似的内容。我想我已经到了一半了。有什么想法吗？




Answer 1

您需要使用MathJax。中心排队，这样每当你在输入框中键入任何内容时，它们都会按正确的顺序由MathJax操作，并将命令MathJax排队。中心Typeset（“yourdivid”）使用id giving对div进行排版。

因此，您的html代码如下所示：

<script type="text/x-mathjax-config">
//apply config
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
//your cdn for mathjax
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">
</script>
<textarea id="content"></textarea>
<div id="render"></div>

您的js代码如下所示：

const input = document.getElementById("content");
const log = document.getElementById("render");
input.addEventListener("input", updateValue);

function updateValue(e) {
console.log(e.target.value)
  log.textContent = e.target.value;
  //adding in queue 
  MathJax.Hub.Queue(["Typeset", MathJax.Hub, "render"]);
}

工作小提琴：https://jsfiddle.net/Swati911/pxLegc2o/1/