Redefining displayMath delimiters to $$ ... $$ for MathJax does not work, using Jekyll and Github pages

Question

I managed to set up jekyll to serve pages, using kramdown as markdown processor, and MathJax to display latex equations.

All is working fine, so I proceeded in trying to change the default delimiters used by MathJax to use $ ... $ for inline and $$ ... $$ for display mode.

To do this I followed the instructions on the relevant MathJax documentation section, so that now my .md file has the following content:

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
      processEscapes: true
    },
    "HTML-CSS": { availableFonts: ["TeX"] }
  });
</script>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>


# Stuff
Correct inline text: $2+\frac{1}{2}$ other text.

Should have been in display mode: $$2+\frac{1}{2}$$ other text.

End

While the inline delimiters are now correctly set to be $ ... $, the double dollars do not produce display mode, as you can see in the page produced by the above:

What did I miss?

Answer 1

There is a solution, but it is not perfect.

Short answer: you can configure MathJax to use single-dollar-sign as a delimiter (of inline math) in your HTML pages, and in markdown the same config works. See the following link for details. https://docs.mathjax.org/en/latest/input/tex/delimiters.html

Long answer:

The Markdown page is first transformed into an HTML page such that consist of HTML tags wrapping the delimiters (dollar signs) and the math equations (in latex syntax). When the browser loads the HTML page, the browser runs the scripts of MathJax, and that transforms delimiters and equations into the beautiful math symbols. So there are two renderers, Markdown and MathJax, and both need to know the delimiters, so that MathJax handles math and that Markdown handles non-math.

Unfortunately, the two renderers work separately, and the inconsistency causes problems. Consider the use of underscore (_), asterisk (*), or vertical bar (|) characters in math equations. Remember that the characters are spectial as part of Markdown syntax. When the special characters are wrapped between math-delimiters, if Markdown renderer does not recognize the delimiter, then the characters are transformed into HTML, and then the math equations are broken and are not proper MathJax syntax.

As given in the document of MathJax, we can configure MathJax. Unfortunately, we often can not configure Markdown renders. When the delimiter is set to single-dollar-sign in MathJax, it is often that Markdown messes up things. The mess can be worked around by escaping special characters, but it is tedious. In the case you run your own Jykell and thus Markdown renderer, you can modify your Markdown renderer, but that is also a lot of work (there is no simple config). This is also discussed in this post: https://11011110.github.io/blog/2019/10/17/mathjax-3-jekyll.html