如何在不使用 MathJax 刷新页面的情况下动态呈现 Tex 和 LaTex 公式？

Question

我的 html 如下：

<textarea id="content"></textarea>
<div id="render"></div>

现在我使用这个 javascript 来动态更新 textarea 中的任何更改：

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\)，我可能会在动态呈现textarea 的内容时得到alpha 符号，而不是得到相同的文本。我想在他们的 mathjax 演示页面中实现类似 this 的内容。我想我已经成功了一半。有什么想法吗？

Answer 1

您需要使用MathJax.Hub.queue，这样每当您在输入框中输入任何内容时，它们都会由MathJax 以正确的顺序进行操作，并将命令MathJax.Hub.Typeset("yourdivid") 排队以排版带有id 的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/