Reputation: 328
I am using MathJax to parse some LaTeX equations. Below works all fine:
<head>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
</head>
<body>
<div id="question">
We like, $$e = mc^2$$
</div>
</body>
Problem arises as I instead of hardcoding the contents of #question, I load them from another file.
<head>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
<script src="jquery-cdn"></script>
<script src="questionLoader.js"></script>
</head>
<body>
<div id="question">
</div>
</body>
---------------
//This is questionLoader.js
$(document).ready(function() {
var theQuestion = "question1.html"; //file to load
$("#question").load(theQuestion);
});
--------------
//This is question1.html
We like, $$e = mc^2$$
Now, sometimes the LaTeX is properly parsed, sometimes not (more often not parsed than parsed). I speculate if MathJax parsing finishes before questionLoader finishes loading, the loaded LaTeX isn't parsed.
Is there a way to ensure questionLoader finishes loading first before MathJax finishes it parsing? Or a callback to MathJax once theQuestion is loaded. What should I do to ensure parsing?
Upvotes: 3
Views: 2255
Reputation: 1586
Call the MathJax.typeset()
function after you have loaded the Maths.
From the docs:
If you are writing a dynamic web page where content containing mathematics may appear after MathJax has already typeset the rest of the page, then you will need to tell MathJax to look for mathematics in the page again when that new content is produced. To do that, you need to use the MathJax.typeset() method. This will cause MathJax to look for unprocessed mathematics on the page and typeset it, leaving unchanged any math that has already been typeset.
Upvotes: 5