CODEWITHSUNDEEP
javascripthtmlbloggermathjax
Sayan Dutta
Sayan Dutta

Reputation: 123

MathJax refuses to compile a specific class of commands

I recently opened a blog in blogger.com to mainly write about short math snippets. To do so, I had to edit HTML and add MathJax. After some googling, I figured out (maybe wrongly) that the way people do it is by copying the following code :-

<script src='https://polyfill.io/v3/polyfill.min.js?features=es6'/>
<script async='async' id='MathJax-script' src='https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js' type='text/javascript'/>
<script>
window.MathJax = {
  tex: {
    inlineMath: [ [&#39;$&#39;,&#39;$&#39;],[&#39;\\(&#39;,&#39;\\)&#39;] ],
    displayMath: [ [&#39;$$&#39;,&#39;$$&#39;], [&#39;\\[&#39;,&#39;\\]&#39;] ],
    processEscapes: true,      
    processEnvironments: true, 
    processRefs: true       
  },
  options: {
   ignoreHtmlClass: &#39;tex2jax_ignore|editor-rich-text&#39;
  }
};
</script>

While it initially felt like this worked, soon I realized that commands of the form

\begin{equation}
...
\end{equation}

aren't getting compiled, although those of the form

$$ .. $$

or even

\[ .. \]

works absolutely fine.

I was managing this with some hrdships until I realised that even

$$\begin{cases}
...
\end{cases}$$

and (even worse)

$$\begin{bmatrix}
...
\end{bmatrix}$$

aren't working. In brief, any command of the form \begin{blah}...\end{blah} doesn't compile.

I guess this is not a blogger.com problem since I have seen many other posts where equations are very well aligned. I have tried every "silly method" that I knew to fix it. But it seems the problem is deeper somewhere. I will be glad if someone can help me out. Please note that I am not a tech savvy person - so the answer to the question might very simply be my own stupidity.

In another post, I was suggested to change all the &#39 to just '. That creates new problems - turns out I can't do it. Every time I'm trying to save those changes, the system autosaves

<script async='async' id='MathJax-script' src='https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js' type='text/javascript'/>
<script>
window.MathJax = {
  tex: {
    inlineMath: [ [&#39;;$&#39;;,&#39;;$&#39;;],[&#39;;\\(&#39;;,&#39;;\\)&#39;;] ],
    displayMath: [ [&#39;;$$&#39;;,&#39;;$$&#39;;], [&#39;;\\[&#39;;,&#39;;\\]&#39;;] ],
    processEscapes: true,      
    processEnvironments: true, 
    processRefs: true       
  },
  options: {
   ignoreHtmlClass: &#39;;tex2jax_ignore|editor-rich-text&#39;;
  }
};
</script>

Also, with the version that gets autosaved, only the commands $$..$$ works and $..$ doesn't.

Here's a screenshot of the first few lines of HTML in case that helps :- enter image description here

Upvotes: 1

Views: 65

Answers (1)

Davide Cervone
Davide Cervone

Reputation: 12205

There are several problems with your code snippet.

First, <script> tags require </script> in HTML, and aren't self-closing with <script ... />, as mentioned in the comments to your post.

Second, your &#39; need to be actual quotation marks (' or ") not entities. Since they are inside a <script> tag, they won't be translated by the browser, but will be used verbatim. That will mean that you configuration is not valid javascript, and you should see an error message in your browser console window (did you check that before posting your message?).

Third, the script that loads tex-mml-chtml.js should come after the one that sets up your configuration, otherwise you run the risk of a race condition where MathJax is loaded (say from the browser cache) and looks for the configuration before it has been defined, so ignores it.

Finally, you should remove the script for polyfill.io. That site was recently bought out by a Chinese company that has used it to insert malicious code into web pages that use it, so you definitely want to avoid that. See the MathJax documentation for more details.

Upvotes: 1

Related Questions