使用 MathJax 使用异步预览文本

Question

下面是使用 jQuery 的文本预览示例。

我原以为在第三行插入以下代码片段可以预览 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>

Answer 1

诚然，这比我希望的要长。

编辑一些背景：

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

MathJax < v3

像this SO post

一样使用MathJax.Hub.Queue

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

您似乎需要根据 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>

使用 MathJax 使用异步预览文本

Preview Text with MathJax Using async

html

javascript

jquery

mathjax