HTML entity(<, > and &) support in MathJax

Question

I am facing a problem with the HTML entity inside the TEX code. I went through this link and tried all the steps from there, But still, I'm facing issues in the "&" symbol.

Here is my Mathjax Configuration Object:

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
    messageStyle: 'none', 
    showMathMenu: false,
    processEnvironments:true,
    tex2jax: { inlineMath: [['$', '$'], ["\\(", "\\)"]], 
    processClass: "equationrender", 
    ignoreClass:"StylePara"
    } });
</script>

When i rendering the below latex,

\begin{align}
h(x) &= \int \left( \frac{f(x) + g(x)}{1+ f^{2}(x)}\right)\nonumber\\
r^{2} &= s^{2} + t^{2}, \nonumber\\
2u + 1 &= v + w^{\alpha},\nonumber\\
x &= \frac{y + z}{\sqrt{s + 2u}};
\end{align}

After rendered in web page TEX code changed like below,

\begin{align}
h(x)  & = \int \left( \frac{f(x) + g(x)}{1+ f^{2}(x)}\right)\nonumber\\
r^{2}  & = s^{2} + t^{2}, \nonumber\\
2u + 1  & = v + w^{\alpha},\nonumber\\
x  & = \frac{y + z}{\sqrt{s + 2u}};
\end{align}

How can I convert the & to mathjax understandable latex code (Please refer the screenshot of, the TEX is rendered in browser). Please advice me.

Answer 1

In HTML, the ampersand (&) is used as a special character for introducing entities, like < for < and > for >, and so on. So to get an explicit ampersand in your document, you need to use &, which is the entity for an ampersand. Most content-management systems (CMS) that give you an editor to enter page content will translate & to & for you automatically, which is the correct thing to do.

I suspect that in your case, the translation of & to & is being done twice, and the result is & in your HTML page. When the browser reads that, it translates the first & back to &, leaving & in your page. MathJax then seems something like r^{2} & = s^{2} + t^{2} \\ as one line in your alignment, and (correctly) parses that as r^{2} in the first column and amp; = s^{2} + t^{2} in the second.

If you use your browser's "view source" option, you should be able to see the original & in the HTML (unless your CMS loads the content dynamically, in which can you can't view the original source).

So the problem appears to be with your CMS, which seems to be doing the & to & conversion twice. Although you could configure MathJax to run a filter to convert & back to & a second time (after the browser has done its conversion), the real issue is with the CMS, not MathJax, so that is where the fix should be applied (to the CMS, not MathJax).