Typesetting Mathematics on your Blog

In the third version of the MNML theme, I added the ability to use mathematics in your blog posts.

The math is typeset using Khan Academy’s KaTeX library, which claims to be the fastest math typesetting library for the web. Additionally, the MNML theme only loads KaTeX if it detects mathematics on the page that need to be rendered. Here’s how you can start using math in your posts.

KaTeX Logo

The TeX Math Typesetting Standard

KaTeX typesets math using the TeX syntax. TeX is a typesetting that was created by Donald Knuth 36 years ago. However, it is still widely used, and it has been noted as “… one of the most sophisticated digital typographical systems in the world.” 1

TeX is popular in academia, especially in mathematics, as well as computer science, engineering, physics, and other disiplines.

Including KaTeX in the mnml theme will allow the scientifically inclined to typeset math in the way they are used to, but from the comfort of their own blog.

If you’re not familiar with Tex, but would like to use math on your blog, take a look at this handy cheatsheet (.pdf)

The Syntax

To use Tex math on your blog, use the following syntax:

<section class="math">TEX EQUATION HERE</section>  

KaTeX will look for any element with the class math, and typeset its contents. I highly recommend using the <section> element for your math, as it formats correctly. If you use non-block-level elements, like spans, Ghost will convert your math to Markdown before KaTeX typesets it, which causes all kind of problems. (Example: Tex subscript will be parsed as Markdown italics).

Thus, this expression:

<section class="math"> \pi = {c \over d}</section>  

… will be rendered by KaTeX like this:

\pi = {c \over d}

Looks mighty fine. What about something more complicated? Try the forumla for standard deviation:

s = \sqrt{\frac{1}{N-1} \sum_{i=1}^N (x_i - \overline{x})^2}


That’s it! The Mnml theme makes it easy for scientists to expound their knowledge … beautifully.

If you don’t plan on using math on your blog, you can disable KaTeX by changing {{>katex}} to {{!>katex}} on line 60 of default.hbs, but since it’s loaded conditionally, you don’t really need to.

Let’s finish of with Heisenbergs uncertainty relation:

\Delta p \Delta x \geq {h \over 4 \pi}