MathJax: Can't render \begin{cases}…\end{cases} using Jekyll

user_388117 0
Viewed 577

We use MathJax on our course website, which is implemented in Jekyll and hosted on GitHub pages. For small, straightforward equations, MathJax works great but I've never been able to get even slightly more complicated equations to work. I've spent many hours investigating and experimenting, so I thought I'd finally ask here.

For example, the following fails to render:

$$
S_{i} =
\begin{cases}
    X_{1} & \text{if i = 1}\\
    \alpha \cdot X_{i} + (1 - \alpha) \cdot S_{i-1} & \text{if i $>$ 1}
\end{cases}
$$

The rendered output in the web browser is literally blank.

When I look at the rendered html, I see:

<p>
<span class="MathJax_Preview" style="color: inherit; display: none;"></span>
<span id="MathJax-Element-5-Frame" class="mjx-chtml MathJax_CHTML" tabindex="0" data-mathml="
    <math
        xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot; />" role="presentation" style="font-size: 113%; position: relative;">
        <span id="MJXc-Node-149" class="mjx-math" aria-hidden="true">
            <span id="MJXc-Node-150" class="mjx-mrow"></span>
        </span>
        <span class="MJX_Assistive_MathML" role="presentation">
            <math
                xmlns="http://www.w3.org/1998/Math/MathML">
            </math>
        </span>
    </span>
    <script type="math/tex" id="MathJax-Element-5">% 
        <![CDATA[ S_{i} = \begin{cases} X_{1} & \text{if i = 1}\\ \alpha \cdot X_{i} + (1 - \alpha) \cdot S_{i-1} & \text{if i $>$ 1} \end{cases} %]]>
    </script>
</p>

I'm not a LaTeX expert so I often write equations (or at least check them) in online editors like https://www.codecogs.com/latex/eqneditor.php or OverLeaf. They render fine there.

I asked this first (link) at the tex StackExchange but they said it was offtopic.

UPDATE: I ended up asking this on the MathJax user group (link) and received a working solution, which is described in detail on GitHub. Thanks all for your responses!

jekyll mathjax markdown html javascript
1 Answers

It looks like Jekyll inserts the math as MathJax <script> tags (<script type="math/tex">), and the contents of that tag are the TeX expression. Unfortunately, the plugin is inserting some additional text to mark the contents as CDATA. This is not needed in HTML, but may be for XHTML. Is your page XHTML (I don't know what Jekyll produces)?

In any case, the plugin probably originally inserted

<script type="math/tex">
% <![CDATA[
... your expression...
% ]]>
</script>

That would have worked (even if it is unnecessary), because the % in TeX marks a comment, so the <![CDATA[ will be ignored, and so will the closing ]]>.

Except that GitHub pages removes line breaks, and so you got

<script type="math/tex">% <![CDATA[... your expression...% ]]></script>

all on one line. That means the first % makes the entire rest of the expression into a comment, and the math is effectively commented out. That means you get no output, since the math expression is actually empty.

This has come up before, and I provided a work-around for version 2:

<script type="text/x-mathjax-config">
MathJax.Hub.Register.StartupHook('TeX Jax Ready', function () {
  MathJax.InputJax.TeX.prefilterHooks.Add(function (data) {
    data.math = data.math.replace(/^% <!\[CDATA\[/, '').replace(/%\]\]>$/, '');
  });
});
</script>

and a version 3 as well:

<script>
MathJax = {
  startup: {
    ready: function() {
      var HTMLDomStrings = MathJax._.handlers.html.HTMLDomStrings.HTMLDomStrings;
      var handleTag = HTMLDomStrings.prototype.handleTag;
      HTMLDomStrings.prototype.handleTag = function (node, ignore) {
        if (this.adaptor.kind(node) === '#comment') {
          var text = this.adaptor.textContent(node);
          if (text.match(/^\[CDATA\[(?:\n|.)*\]\]$/)) {
            this.string += '<!'
            this.extendString(node, text);
            this.string += '>';
            return this.adaptor.next(node);
          }
        }
        return handleTag.call(this, node, ignore);
      }
      MathJax.startup.defaultReady();
      MathJax.startup.document.inputJax[0].preFilters.add(function (data) {
        data.math.math = data.math.math.replace(/^% <!\[CDATA\[/, '').replace(/%\]\]>$/, '');
      });
    }
  }
};
</script>

In any case, it is the (probably unnecessary) CDATA "comments", together with the removal of line breaks, that is causing the problem.

user_5023340
Related