Tuesday, January 22, 2013

Effectively Enable MathJax on Blogger

The Cause

Simply adding the javascript code in the template may not work for all bloggers, at least not for me. The reason is that Blogger filters the code one adds into the template and some of configurations are encoded in html entities, thus not functioning at all.

The Working Method

Go to the console, select layout and add a gadget "HTML/Javascript", put the following code inside.

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

Make sure this gadget is available globally.

Demo Test

$$\cos x = \frac{e^{ix}+e^{-ix}}{2}$$

4 comments:

  1. how do you make sure its available globally?

    ReplyDelete
    Replies
    1. "Globally" I mean to make the gadget is loaded on every page (according to your Layout). Anything written within dollar symbols in such page is automatically scanned by Mathjax, thus "globally" in a single page.

      Delete