使用 MathJax 使用异步预览文本答案

【问题标题】：Preview Text with MathJax Using async使用 MathJax 使用异步预览文本
【发布时间】：2021-04-09 01:20:04
【问题描述】：

以下是使用 jQuery 进行文本预览的示例。

我原以为在第三行插入以下 sn-p 会预览 MathJax。

async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"

我很困惑为什么添加这部分不会转换 LaTeX。如何激活 MathJax 以使其仅在下面的预览中转换下面的消息？我在网上看到了其他类似的例子，我觉得我错过了一些东西。

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function preview(){
 $("#preview_div").html($("#message").val());
}
</script>
<div id="wrapper">
<textarea id="message" onkeyup="preview();" placeholder="Enter MathJax here"></textarea>
<div id="preview_div"></div>
</div> 
</html>

【问题讨论】：

标签： javascript html jquery mathjax

【解决方案1】：

诚然，这花费的时间比我想象的要长。

编辑一些背景：

我认为数学 jax 的工作原理是它会在页面加载时渲染所有配置的 dom 节点一次。要动态渲染，您需要调用相关的动态排版函数（见下文）

MathJax

使用MathJax.Hub.Queue，如this SO post

MathJax v3 或更高版本（根据帖子要求）继续阅读：

您似乎需要根据 mathjax v3 文档使用新的 typesetting API：

我不太了解 mathML，但我尝试使用 LaTeX $$M_1$$ 似乎产生了正确的输出

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script type="text/javascript">
function preview(){
  const val = $("#message").val()
  $("#preview_div").html(val)
  MathJax.typesetPromise($("#preview_div")) // returns a promise, if you need to do something after typesetting
}
</script>
<div id="wrapper">
<textarea id="message" onkeyup="preview();" placeholder="Enter MathJax here"></textarea>
<div id="preview_div"></div>
</div> 
</html>

【讨论】：