Below is an example of a text preview using jQuery.
I would have thought inserting the following snippet in the third line would preview MathJax.
async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
I am confused why adding this portion does not convert LaTeX. How can I activate MathJax to make it convert the message below in only the preview below? I have seen other examples of this working online, and I feel like I am missing something.
<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>Advertisement
Answer
Admittedly, this took longer than I would have liked.
edit some background:
I think how math jax works is that it will render all configured dom nodes once, on page load. To render dynamically, you will need to call the relevant dynamic typeset functions (see below)
MathJax < v3
use MathJax.Hub.Queue as in this SO post
MathJax v3 or above (per post’s requirement) read on:
It seems you will need to use the new typesetting API per mathjax v3 doc:
I don’t know much mathML, but I tried with LaTeX $$M_1$$ seems to produce the correct output
<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>