Pretty equations in WordPress

Chalkboard maths

We’ve spent a couple of months now on Knowledgeblog since JISC funded the project. My one day a week working on developing the tools and workflows for lightweight publishing has presented totally different challenges to the majority of my work, and I’m really enjoying it so far. Hopefully we’re engaged in building something that a lot of people will find useful in the long run.

Part of what will make the project useful to as many people as possible is the incremental goals that we will be combining into the whole platform, but that will hopefully be useful to a lot of folks in their own right. The first of these milestones is MathJax-LaTeX, a plugin for WordPress that renders mathematical equations in as attractive a way as possible.

WP-LaTeX is the usual way to do this in WordPress. This plugin takes inline LaTeX code in blog posts, and converts it into PNG images. These images are pretty good, they look good at the default resolution and they do the job, but we thought there might be a better way. Images are not particularly accessible, and they don’t scale very well (as you zoom in on a page, they start to pixelate pretty badly). It also requires running LaTeX locally, or on a third-party server, which might be undesirable for some people.

I’m aware of MathJax because I used to listen to the Stack Overflow podcast, and Joel and Jeff talked about it in one episode in relation to the Math Overflow site, because it was being leveraged there to render the large quantity of equations that a site like that requires. MathJax is a Javascript library that interprets LaTeX and MathML, and renders it as scalable web fonts inline. The LaTeX that is interpreted remains in the source of the page, and the equations are not images, so they scale perfectly with the rest of the text on the page. So the question is, what’s the best way to use MathJax to render equations in blog posts?

The instructions on the MathJax page tell you to edit the header of your blog theme to introduce the Javascript library on every page of the blog. We thought that using a plugin to inject the Javascript only on the pages it is required would be more efficient (it’s a big library, and you don’t want to load it on every page if you don’t have to). It also allows us to stay compatible with WP-LaTeX, because we can leverage the shortcode API that is a brilliant part of the WordPress environment.

Well, the MathJax-LaTeX plugin was published this week, you can download it now, and there’s a page on knowledgeblog.org describing in full how it works. If you’ve used WP-LaTeX in the past, MathJax-LaTeX understands the same syntax, so you can replace one with the other, if you wish.

Here’s a few examples:

The probability of getting (k) heads when flipping (n) coins:

P(E)   = {n choose k} p^k (1-p)^{ n-k}

This is an inline equation: sqrt{3x-1}+(1+x)^2  it should be rendered without affecting the text around it.

OK, one more, definition of (e):

e = lim_{ntoinfty} left( 1 + frac{1}{n} right)^n

[mathjax]

If you want to keep tabs on how Knowledgeblog is developing, you can follow us on Twitter, watch our Google Code repository, and keep an eye on the site.

</plug>

(Photo courtesy of bourgeoisbee on flickr.com)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s