Experimenting with MathJax

I’m experimenting with MathJax to include mathematics on the blog. Part of the incredible slowness in which I write posts is doing everything by hand in HTML. For example, I have a future post for the Horn clause series that I keep not finishing because I get tired of writing the subscript tags. MathJax is the display engine used for Math Overflow and Stack Exchange, which allows you to use tex commands to represent formulas.

Here’s a sample of tex-encoded math formulas that I copied from the MathJax site.

When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

If you actually view the source for the file in your browser, you’ll see the raw tex commands in the post. MathJax uses CSS to render it on the fly. I’m actually surprised this is possible, but apparently it is.

4 thoughts on “Experimenting with MathJax

  1. FYI, the latex isn’t rendered in Google Reader (I suspect the same would happen in other readers as the CSS isn’t handed over). There are latex plugins that render the latex as a png (though this CSS thing is pretty amazing, I won’t lie).

  2. Great to see MathJax spread! I personally like combining it with markdown (via the markdown-on-save plugin) — just like on MO and stackexchange. There are a few bumps to watch out for (markdown and mathjax sometimes clash), but it’s not really a problem, especially with the markdown variant in that plugin (it’s very clever at avoiding the problem of \ being a markdown escape character).

    Oh, and also: depending on the browser, MathJax will display mathml or picture fonts — the amazing thing is the cross-browser support, even on IE, so that no matter what your readers use, you can safely assume they get the expected math.

  3. Works fine for viewing on my 2007 iPhone with iOS 3.1.3! JavaScript is 40x slower on this old phone versus an iPad 2, but it eventually shows up.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>