如何解决使用 async 使用 MathJax 预览文本
以下是使用 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。