我有我的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\)我可能应该alpha在动态呈现的内容的同时获取符号textarea，而是返回相同的文本。我想在他们的mathjax演示页面中实现类似这样的功能。我想我已经走了一半。有任何想法吗？
您需要使用，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"]);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句