Jun 242014

I've been working at Design Science for a couple of months now, as Senior Product Manager concentrating on the MathFlow products. So I figured I should enable MathML support on my blog. It's not hard, but like everything in tech there are a few niggly details. Many of those issues are caused by WordPress's over-eager helpfulness, which has to be reined in on a regular basis if you're doing anything at all out of the ordinary. Like editing your posts directly in HTML rather than using some pseudo-WYSIWYG editor.

Theoretically, showing MathML in a browser is easy, at least for the sort of equations that most people put in blog posts, even though not all browsers support MathML directly. You just use the MathJax JavaScript library. On WordPress there is even a plugin that adds the right script element, the MathJax-Latex plugin. You can make every page load MathJax, or use the [mathjax] shortcode to tell it when to load.

The wrinkle comes with WordPress' tendency to "correct" the markup. When you add the MathML, WordPress sprinkles it with <br/> tags. MathJax chokes on those and shows nothing. Since the tags don't show up in the editor view, you need some way of stopping WordPress from adding them. The best way I've found is with the Raw HTML plugin.

But there's a wrinkle with that too. For some reason if you use the shortcode version of the begin and end markers ([raw]) the editor decides that the XML characters between those markers has to be turned into the character entities, so for example the < characters are turned into &lt;. To stop that, you need to a) check all the checkboxes in the Raw HTML settings on the post, and b) use the comment version (<-- raw --> and <-- /raw -->) to mark the beginning and end of the section instead of the shortcode version.

Once it's done it's easy to add equations to your pages, so it's worth the extra few minutes to set it all up.

A couple of examples taken from the MathJax samples page

Curl of a Vector Field
Standard Deviation

and one from my thesis from way back when


  9 Responses to “MathJax, MathML, and WordPress”

  1. My brain just imploded. This is terribly cool… there is something awesome about looking at math equations I can’t understand.

  2. More dumbing down (and resultant pain?).
    Note yet one more variant on SGML markup? How many does that make? [tag] ..[/tag] etc.

    Odd Lauren. Using feedly, the mathml doesn’t show up. Link through to the blog (direct browser
    access I guess) and it does.

    Enjoying the job?

    • You’re right about feedly. I guess they restrict the markup that they will allow? Many people don’t think about MathML when they figure out which markup to allow, even though it’s part of HTML5.

      I understand WordPress trying to make general HTML editing easier for people. ‘Easy things easy and hard things possible’ and all that; just a pity they tend to go rather more overboard than I like. But, enough people have the issue that these plugins exist, which makes it all a relatively minor annoyance.

    • And yes, I’m enjoying the job.

  3. Congratulations on the job.

    Of course, if you had enabled MathML in the comments field I’d have something wise to say about your thesis equations. Of course … I would.

    (Ran into Deb Lapeyre looking at comic books in the British Museum. Had a great chat. She sends her regards.)


  4. i need mathmleditor plugin for wordpress ?
    how can help me?

  5. i need mathmleditor plugin for wordpress ?
    who can help me?

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



/* ]]> */