Can I use MathJax on a square?

Question

I'm currently trying to create a new website using squares, and I would like to use MathJax for a set of maths. This is the same engine that SE uses for mathematics in physics. For example, for example.

The standard way to use MathJax is to put a specific piece of code in the page title that you would like to use MathJax, as described here . I tried to do this squared using the "code injection" function, which allows you to put the desired code in the title of all pages on a square site, but the math does not seem to be rendering.

This person claims to have done the above procedure, but after entering the desired mathematical formulas in the HTML code block, as he suggests, MathJax does not seem to work. The following is sample code.

JavaScript:

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script> 

HTML:

 When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$ 

Update. It seems that MathJax really correctly displays the procedure described above (namely, if you enter it in the HTML html block), but ONLY if you view the site as a visitor, and not while logging into your squarespace account.

Answer 1

I found that using prognostic agnostic:

 <script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script> 

It works either embedded in a block of HTML code, or as embedded code.

Square space dynamically generates some pages, so you may need to type a page after MathJax first sees the page. Pasting the following script into dynamically loaded content tells MathJax to re-type the page at the next opportunity.

 <script> MathJax.Hub.Queue(["Typeset",MathJax.Hub]); </script> 

Answer 2

The answers above did not work for me due to race conditions. The Squarespace path displays the Markdown blocks - to process them at runtime and embed HTML output in the DOM on the fly. If this happens after we call the MathJax API for the page set, the newly inserted elements will display raw LaTeX instead of the output of the set.

To answer this, I instead placed this in the footer:

 <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script> <script> document.addEventListener("DOMNodeInserted", function(event){ var element=event.target; MathJax.Hub.Queue(["Typeset",MathJax.Hub,element.parent]); }); MathJax.Hub.Queue(["Typeset",MathJax.Hub]); </script> 

Note that if you use this code, you must be very careful not to wrap LaTeX in Markdown blocks in HTML elements, to avoid an infinite loop.

UPDATE: Since the MathJax CDN is disconnected (and so that LaTeX in Markdown blocks fixes the problem that I hinted at above), the current code I'm using is:

 <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script> <script> document.addEventListener("DOMNodeInserted", function(event){ var element=event.target; if (element.tagName.toLowerCase()!= 'script') { MathJax.Hub.Queue(["Typeset",MathJax.Hub,element.parent]); } }); MathJax.Hub.Queue(["Typeset",MathJax.Hub]); </script>