Is it possible to use MathJax on squarespace?

Question

I am currently attempting to create a new website using squarespace, and I'd like to use MathJax to typeset mathematics. This is the same engine used by SE to render mathematics on physics.SE for example.

The standard way of using MathJax is to put a certain code snippet in the header of the page one which you would like to use MathJax as outlined here. I have attempted to do this in squarespace by using the "code injection" feature that allows one to put desired code into the header of all pages on a squarespace site, but the mathematics doesn't seem to be rendering.

This person alleges to have made the procedure I outline above work, but after entering the desired mathematical formulas into an HTML code block as he suggests, MathJax does not seem to be working. Below is a code sample.

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 as though MathJax does actually render properly using the procedure outlined above (namely if you enter it into an html code block), but ONLY if you are viewing the site as a visitor, and not while you are logged into your squarespace account.

Answer 1

I found that using the protocal agnostic:

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

Works either embedded in an HTML code block, or as injected code.

Squarespace dynamically generates some pages, so it may be necessary to typeset the page after MathJax first sees the page. Inserting the following script in the dynamically loaded content tells MathJax to typeset the page again 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 way Squarespace renders Markdown blocks is to process them at runtime and insert the output HTML into the DOM on the fly. If this happens after we call the MathJax API to typeset the page, the newly inserted elements will display the raw LaTeX instead of the typeset output.

To address this, I instead put 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 should be very careful not to wrap LaTeX within Markdown blocks in HTML elements to avoid an infinite loop.

UPDATE: Since MathJax CDN has shut down (and to allow LaTeX within Markdown blocks to fix the issue 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>