Mathjax breaking with \mathcal and subscript

I am using MathJax3 on a Jekyll website. I have an issue when \mathcal is subscripted inside an equation environment.

For example, the following code doesn't work (it is rendered as pure text)

\begin{equation}
    f(x) = \mathcal{L}_{\theta}(x)\sum_{i=1}^N x^2
\end{equation}

but the same in the $$ environment works correctly:

$$
    f(x) = \mathcal{L}_{\theta}(x)\sum_{i=1}^N x^2
$$

The issue appears to be in having \mathcal with a subscript followed by \sum with a subscript. If I remove the subscript from \mathcal or \sum everything works also in the equation environment. However, \sum doesn't give this issue with any other component, therefore I assume the problem is with \mathcal.

My MathJax configuration is the following:

<!-- MathJax --> 
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script async src="https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js?config=TeX-AMS-MML_CHTML"></script>

<script>
    MathJax = {
      tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']],
        tags: 'ams'
      }
    };
</script>

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

Solution

First of all, you are loading MathJax three times, which is never a good idea. Plus you are loading three different versions (your first script loads MathJax v3, your second loads the latest v2 (2.7.9), and the final script loads MathJax v2.7.1). Because the first two scripts have the async attribute, these will not block the rest of the page from being processed, and so the final script (without async) probably will be run before either of the first two are loaded, so you are probably getting version 2.7.1, which is quite old. But it may be that if one of the other versions is in your browser cache, it may be run immediately, and you will get that, and thus it is not clear what version you will actually get. So the first thing you should do is clean up your loading of MathJax (decide on what version you want to use and only load that one).

Your script with the MathJax configuration variable contains a v3 configuration, so you may want to retain the first MathJax loading script and remove the others. But the configuration script should come before the script that loads MathJax (so it is in place when MathJax loads).

But none of those are the cause of the issue you are having. That is a bad interaction between Jekyll's Markdown and the LaTeX in your page. Markdown uses underscores to delimit italic text, so when you have subscripts for two items, Markdown will insert <emph>...</emph> (or something similar), and since MathJax doesn't process math containing HTML tags, that will prevent your equation from being typeset.

Apparently, Jekyll knows about $$...$$ delimiters and prevents the underscores being processed by Markdown, but doesn't know about \begin{equation}...\end{equation}, and so underscores are processed there. I don't use Jekyll myself, so I can't test it, but that's what it looks like to me.

See the MathJax documentation for information about such interactions with content-management systems, and potential work-arounds.