Tuesday, February 8, 2011

MathJax in Blogger

I recently came across MathJax, the amazing new open-source approach to displaying $\rm{\LaTeX}$ on the web. Finally we can use fonts for $\rm{\TeX}$ on the web, instead of these ridiculously ugly figures that substitute the $\rm{\TeX}$ code, and whose size and alignment induces vomiting.

One can install MathJax on their server and use it to include beautifully-typeset math in their webpages. To get it to work in Blogger, follow the steps below.
  1. ssh into your server and install MathJax as described here (preferably with the svn method so that you can easily update MathJax in the future).
  2. Since (most likely) Blogger is not hosted on your server, follow the instructions here. You basically need to create the file .htaccess in the server's mathjax/fonts/HTML-CSS/TeX/otf folder and paste the following text in it:
    <FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
  3. Finally, go to your Blogger account, click "Design", and then "Edit HTML". After the first <head> you see, paste
    <script type="text/javascript" src="your-server/mathjax/MathJax.js">
    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>
     where your-server is to be substituted with your server's http address.
You're done! You can now use the usual $...$ or \(...\) for inline equations, and $$...$$ or
\[...\] for equations that are centered in their own line.

Time for an example:\[\sin^2\theta+\cos^2\theta=1.\]Note that the code above loads AMSmath.js and AMSsymbols.js, so that the macros and environments they provide are defined for use on your blog.
at

1 comment: