Markdown with MathJax in WordPress

I usually write blog posts and my private plain text notes in Markdown using the PHP Markdown Extra flavour which adds syntax for very useful features like tables and footnotes. It is a pretty clean markup language that makes WordPress writing a bit more comfortable than with either Visual or HTML, the two standard post editors.

At the moment I am working on a fairly long post for this blog which requires some mathematical formulas1. The MathJax project has cooked up an awesome combination of JavaScript, CSS, web fonts and MathML to produce math on web sites so great that it seems like magic:

[\frac{1}{\pi} e^{-x^2-p^2}.]

Try to zoom in or out and see how beautifully the formula scales. It is even (to some extent) copy-pastable.

I discovered a nice little plugin for WordPress that adds MathJax support to PHP Markdown Extra and makes it available in the post editor. PHPMEM (PHP Markdown Extra Math) by Dr. Drang looks in the markup for the standard LaTeX math mode switches,

\( \) and \[ \]

and converts that into MathJax-enabled HTML code. All that is needed for install is to place the markdown.php file from here in the /wp-content/plugins folder of the WordPress installation and to add the following line to the <head> section of the header.php file in the current WordPress theme2:

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

Now we can easily make beautiful inline math like [\mathrm{pr}_{\theta}(x) = |\langle x|\psi\rangle|^2] or display math like

[\langle x_{\theta}|n\rangle = \frac{e^{-in\theta}}{\sqrt{2^n n! \sqrt{\pi}}} H_n(x) e^{-x^2/2}]

with standard [\LaTeX{}] syntax and Markdown:

Now we can easily make beautiful inline math like \(\mathrm{pr}_{\theta}(x) = |\langle x|\psi\rangle|^2\) or display math like

\[ \langle x_{\theta}|n\rangle = \frac{e^{-in\theta}}{\sqrt{2^n n! \sqrt{\pi}}} H_n(x) e^{-x^2/2} \]

with standard \(\latex\) syntax and Markdown:

(Sorry about the code extending past the right edge. I have to look into the CSS or perhaps a plugin to find a way to make the code wrap. Any hints are very welcome.)


  1. I also use WordPress for my lab book at work. It is even more important to have a good solution for math display there. 

  2. At MathJax’s site there are further tips on installation and configuration.