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.