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.

Your post must include a link to this post.

How does this work?
Write a response on your own website and include a link to this post. Then submit your response’s URL here. Your response may appear here after moderation. To update or remove it, edit or delete your original post and submit the same URL again. Learn more about Webmentions.