How to recall or restart MathJax?

Question

I need MathJax to recheck again all my page.

I mean when the page is created it does all great. But I need to call it after window.onload to reparse the page, as its contents have changed in the meantime.

How would I do such a thing?

Tithonus

Answer 1

See http://docs.mathjax.org/en/latest/advanced/typeset.html:

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.Hub.Typeset() method. This will cause the preprocessors (if any were loaded) to run over the page again, and then MathJax will look for unprocessed mathematics on the page and typeset it, leaving unchanged any math that has already been typeset.

You should not simply call this method directly, however. [You should instead] queue the typeset action, [using this] command:

MathJax.Hub.Queue(["Typeset",MathJax.Hub]);

Demo here: http://cdn.mathjax.org/mathjax/latest/test/sample-dynamic.html

Dittmer

According to the docs, you should not call MathJax.Hub.Typeset() directly, as MathJax operates asynchronously. Instead you should call MathJax.Hub.Queue(["Typeset",MathJax.Hub]); – Anthill

@AnthonyBatchelor: Agreed. I've updated my answer to make that more obvious. – Dittmer

Note from the future: cdn.mathjax.org is nearing its end-of-life, check mathjax.org/cdn-shutting-down for migration tips. – Harcourt

Other methods to try: Rerender, Reprocess – Niblick

Note: This solution is for MathJax 2. – Thomasina

Answer 2

I found the simplest way to do dynamic updates with MathML is to let MathJax do the content changes (instead of the jQuery .html(s) function, e.g.) Then it processes the math while changing the content.

<script type="text/javascript">
   function updateMathContent(s) {
       var math = MathJax.Hub.getAllJax("mathdiv")[0];
       MathJax.Hub.Queue(["Text", math, s]);
   }
</script>

...

<div id="mathdiv">
   <math xmlns="http://www.w3.org/1998/Math/MathML">
      <msup>
         <mi>x</mi>
         <mn>2</mn>
       </msup> 
   </math>
</div>

So just use the function to replace the entire contents of the div with new MathML and it will work. (The script goes in the head.)

Note: If you have an empty math div and add MathML later, you will get a script error. But if the math tags are present with nothing inside the call to updateMathContent will work.

Phrasal

Answer 3

@thirtydot's answer only works for MathJax2. The MathJax3 answer is now simply MathJax.typeset() or MathJax.typesetPromise() for an asynchronous request.

From the new (June 2023) version of the page: https://docs.mathjax.org/en/latest/advanced/typeset.html

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.

This command runs synchronously, but if the mathematics on the page uses \require or causes an extension to be auto-loaded (via the autoload component), this will cause the typeset call to fail. In this case, you should use MathJax.typesetPromise() instead. This returns a promise that is resolves when the typesetting is complete.

Minatory