Trouble rendering some latex syntax in MathJax with Jekyll on github pages - latex

Question

I found that some of latex syntaxes are not rendered with MathJax with Jekyll in my git page.
For example, in this post
this line:
$z = \overbrace{\underbrace{x}\text{real} +\underbrace{iy}\text{imaginary}}^\text{complex number}$
should look like this
Some other latex syntax works well, like this
What should I add to solve this problem? I guess MathJax is not loading the required library (e.g. \usepackage{amsmath} in the above case).
The code of the page is here.
The following code shows the my configuration of matjax.
<script type="text/x-mathjax-config"> MathJax.Hub.Config({ TeX: { equationNumbers: { autoNumber: "all" } } }); </script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true
}
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>

Answer 1

Note that in Jekyll's Markdown syntax, underlines are used to indicate italic text, so Jekyll is inserting <em> tags around \text{real} +\underbrace{iy} where the underscores were (notice that the underscores are missing in the output and that the text is in italics). MathJax can't process math that contains HTML tags, so this math equation is skipped.
You need to make sure that Markdown doesn't interfere with your TeX notation. That can be done in several ways. You could use \_ instead of _ in order to prevent the underscores from being interpreted as italics. Alternatively, you could use <span>...</span> around inline math and <div>...</div> around display math, as suggested here.

Answer 2

Just a hunch but looking at the code posted within your question, I think it might be better to keep all the MathJax related stuff within the <script> tags. I write this because I've yet to find the need to wrap anything in a <span>.
Here's what my _includes/mathjax.html file looks like by piecing together two blocks from the docs...
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']],
processEscapes: true
}
});
</script>
... and this is how I include it...
---
layout: post
title: Some of Thing
---
{%- include mathjax.html -%}
Notes about $ \sum_{Thing} $
Note how the configs are within the same <script> tag as what is doing the sourcing (src="<url-or-path>"),
For completeness a post source to go with rendered post, which uses the $$ way of doing multi-line formatting within the first thirty lines of the source, and then the $ in line way of doing things just after the first code formatted block (within the notes) of the rendered version.
And (for bonus points I suppose), what I think the corrected code might look like from the question.
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript">
MathJax.Hub.Config({ TeX: { equationNumbers: { autoNumber: "all" } } });
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true
}
});
</script>
One other note worthy thing that I found my tests is that the \( ... \sum_{Thing} ... \), in-line syntax did not trigger whatever pre-parser Jekyll's using to add html tags to such things; in other-words I had to use the $ ... \sum_{Thing} ... $ syntax even before adding any configs for MathJax's srcing.
For those that got this far but wanted to cut-down on the CDN usage for some reason, ya may instead be interested in the other answer that I've posted on getting MathJax and Jekyll to play-nice.
And for those that want some Liquid to JavaScript configuration translation liquid-utilities/includes-mathjax is now available; allows for configuring MathJax via _config.yml and individual post/page FrontMatter.