使用 async 使用 MathJax 预览文本

编程问答 2022-06-01

问题描述

以下是使用 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>

解决方法

诚然，这花费的时间比我希望的要长。

编辑一些背景：

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

MathJax

在 this SO post 中使用 MathJax.Hub.Queue

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>

htmljavascriptjquerymathjax