Saturday, July 31, 2010

Math, Math Everywhere

Apparently you can use math on Blogger.  I've been using jsMath elsewhere, but MathJax seems to work best if you have to do things across domains.  And on Blogger, it seems you do.

Here is some TeX equation goodness for you. \[e^{i\pi} = -1\]
Now that's a beautiful equation.  You might have to wait a few seconds for it to appear in rendered glory.  Look at the bottom left, where MathJax displays status information while it's working.

Inline math works, too!  I think we can all agree that \(\nabla \cdot \mbox{E} = \frac{\rho}{\epsilon_0}\), while \(\nabla\cdot\mbox{D}=\rho_f\).

How It's Done

To get equations, you need to do the following.
  1. Install MathJax somewhere publicly accessible.  You need a server you control, where you can upload arbitrary files.
  2. Modify the MathJax installation slightly to allow access from other domains.
  3. Modify the HTML of your Blogger page to load MathJax.
The brutal details follow.
  1. First, download MathJax from here: http://www.mathjax.org/.  I recommend downloading the archive.  Be sure to get both the MathJax core files, and the web fonts.
  2. Unzip the archives on your web server.  Note that the fonts should be unzipped inside the MathJax folder to create the fonts folder.
  3. Verify it works!  Point your browser to the MathJax installation's test folder.  It is probably something like http://yourserver/MathJax/test.  Make sure the equations render correctly, and go read the documentation if they don't.  Remember: It may take a few seconds to render the equations!
  4. Follow the instructions here.  Basically, go to MathJax/fonts/HTML-CSS/TeX/otf and create a .htaccess file with the following contents.
    <FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    </IfModule>
    </FilesMatch>

  5. Now, go to your Blogger account and click Design and then Edit HTML.  Add the following line as the first line in the section.
    <script type="text/javascript" src="http://yourserver/MathJax/MathJax.js"></script>

    Of course, replace that URL with the correct URL for your installation.

That's it. Create a post and add some inline math with \(...\), and some display equations with either $$...$$ or \[...\]. Preview it to make sure it works, and if so, you're done! Enjoy!