MathJax with WordPress

It’s not something I do regularly, but occasionally I like to include equations in my writing here. MathJax seems to be the consensus choice for equation presentation today, and it meets all of my criteria:

  • Uses the LaTeX equation format, which is as portable as these things come.
  • Does not require the use of fixed resolution images.
  • Can take advantage of browser support for MathML.

Dr. Drang wrote a post a while back about his modifications to PHP-Markdown-Extra to include support for MathJax. I’m still using the canonical version of PHP-Markdown, and I’d prefer to stay on the main development branch, so I went searching for alternatives. What I found is the MathJax-LaTeX WordPress Plugin. In combination with PHP-Markdown, this site turns this:


<p>
\\[ \begin{align}
{gain}_{left} & = \left( \cos { \frac{2}{\pi} \color{red}{pan}} \right) \\\
{gain}_{right} & = \left( \sin { \frac{2}{\pi} \color{red}{pan}} \right)
\end{align} \\]
</p>

Into this:

\[ \begin{align} {gain}_{left} & = \left( \cos { \frac{2}{\pi} \color{red}{pan}} \right) \\ {gain}_{right} & = \left( \sin { \frac{2}{\pi} \color{red}{pan}} \right) \end{align} \]

There are a couple of things to note about this. First, I have to wrap the whole equation in <p> tags in order to keep PHP-Markdown from trying to parse it. Second, while the documentation for MathJax indicates thet only a single backslash is required to kick off a block, I need to use two, the first to escape the second (I think). Finally, I need to include the Shortcode to have MathJax included on the page. This is actually great, because it means that the scripts are only loaded when they’re truly needed.

Marked 2 also supports MathJax, so I’m able to fully preview my equations before pushing them live on this site, which is great, because I don’t know LaTeX equation syntax well enough to get it right on the first try.