The RIGHT code to enable MathJax in your website

I started using MathJax to display math on my blog (Drupal and Google Blogger) recently. OMG, my life is much easier. LaTeX is easier to type math than MathML and MathJax does not render math into pictures but vector symbols.

But I noticed two problems.
  1. Firefox for Linux has a little problem with the Javascript code on MathJax official instruction. The fonts are odd - no such problem on Chrome for Linux. (See below)
  2. MathJax's official instruction does not work for Blogger's HTML template.

Problem 1: See how t' looks like on the left in Firefox, in contrast to how it looks like on the right in Chrome.



Then I found out this instruction that fixed both of my problems:
http://irrep.blogspot.com/2011/07/mathjax-in-blogger-ii.html Though it says it is for Blogger, it should work for any CMS.

So, this the right code to enable MathJax on your website:

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

Please pay great attention to the escape sequences for inlineMath. Maybe you wanna disable the dollar quotations if you have more than one dollar sign in one post.

1 comment:

Anonymous said...

Note that there is an extra comma after the processEscapes: true that will cause problems for IE.

The reason you had different results in Firefox is probably because the MathJax documentation suggests using one of the combined configuration files that chooses the native MathML rendering, when possible. Since Firefox supports MathML, MathJax would have used that, and the rendering would use the browser's choice of fonts for MathML (rather than MathJax's web-based fonts) and the layout would be somewhat different. The configuration you give above uses the HTML-CSS output in all browsers, so it will be the same in Forefox as it is in other browsers.

Finally, can you say something more about what didn't work for you in Blogger with the official MathJax instrucitons? I might be able to fix that. You can report problems at the MathJax GitHub site at https://github.com/mathjax/MathJax/.

Davide