PHP Markdown Extra Math, MathJax, and WordPress
September 27, 2010 at 10:00 PM by Dr. Drang
Over the weekend, I modified PHP Markdown Extra Math, my fork of Michel Fortin’s PHP-based Markdown processor. PHPMEM can now output either jsMath or MathJax, with the latter being the default format. If, like me, you
- have a WordPress blog;
- prefer to compose your posts in Markdown instead of HTML;
- need to include mathematical equations in your posts;
- understand the TeX/LaTeX system for writing equations; and
- hate the idea of using fixed-resolution images for the equations
then PHPMEM may be just the plugin you need.
I’ve been using PHPMEM with jsMath, an older TeX/LaTeX formatting engine also written by Davide Cervone, for years; my goal in making the change to MathJax was to have my old posts work under the new system with no editing. After the switch, I did have to rewrite one equation, so I didn’t quite meet my goal, but I came closer than I expected.
PHPMEM configuration
The math configuration in PHPMEM comes on Lines 41 and 42:
41: # Change to "jsmath" for jsMath output.
42: @define( 'MARKDOWN_MATH_TYPE', "mathjax" );
By default, PHPMEM generates MathJax code, but you can change that to jsMath by editing Line 42. I thought about eliminating jsMath support altogether, but since the code was already in place it seemed better to keep it as an option.
WordPress theme modification
The markdown.php file in PHPMEM can be added to the plugins directory of your WordPress installation, just like any other plugin. To get MathJax working, you’ll have to install MathJax on the server1 and add this line to the <head> section of your theme’s header.php file:
<script type="text/javascript" src="path-to-MathJax/MathJax.js"></script>
where path-to-MathJax is replaced by the appropriate directory on the server. If you put MathJax in top-level web directory, this would be
<script type="text/javascript" src="/MathJax/MathJax.js"></script>
MathJax configuration
MathJax has many configuration options, which are controlled through the MathJax/config/MathJax.js file. For PHPMEM, you’ll want to make sure the jax setting is
jax: ["input/TeX","output/HTML-CSS"],
and the extensions setting does not include tex2jax.js. The tex2jax.js extension duplicates some of what PHPMEM does and can lead to goofy output if you like to present both code and equations in your blog.
The other MathJax configuration options are pretty much up to you.
Use
To write an inline equation, like \(E = mc^2\), you write it just as you would in a LaTeX document, inside a pair of backslashed parentheses:
To write an inline equation, like \(E = mc^2\), you write it…
PHPMEM finds the equation and converts it to a form MathJax can understand:
<script type="math/tex">E = mc^2</script>
Similarly, for display equations, like
you write it as you would in LaTeX, on a line by itself inside a pair of backslashed square brackets,
\[\Phi(x) = \frac{1}{\sqrt{2\pi}} \int_{-\infty}^x e^{-\xi^2/2} d\xi\]
and PHPMEM converts it to the MathJax form
<script type="math/tex; mode=display">\Phi(x) = \frac{1}{\sqrt{2\pi}} \int_{-\infty}^x e^{-\xi^2/2} d\xi</script>
As with other HTML tags in Markdown, you can insert the <script> tags directly in situations where the formatting is tricky. If you need to use more than one line to write and equation, you’ll need to use <script> tags. For example,
was written
<script type="math/tex; mode=display">
\Phi(x) = 1 - \Phi(-x) =
\frac{1}{\sqrt{2\pi}} \int_{-\infty}^x e^{-\xi^2/2} d\xi
</script>
In the future, I may dig into the PHPMEM source to allow multiline input between \[…\] pairs, but don’t hold your breath.
-
MathJax is pretty big. If you have command-line access to your server, it’s best if you transfer the zipped version to the server and unzip it there. If you have to unzip it on a local machine and then transfer it to the server, expect the process to be very slow. ↩
