Display Mathematical Equations in Ghost

$$ f(a) = \frac{1}{2 \mathrm{\pi} i} \oint_\gamma \frac{f(z)}{z-a} \mathrm{d}z $$ (Cauchy's integral formula)

Ghost does not have a native way to show equations, but we can add the wonderful MathJax JavaScript library to do it for us.

Install MathJax

The easiest way to install MathJax is to use their CDN, but you can install your own copy as well. We'll need to add the script to the ghost theme directly, so open up the <ghost-directory>/content/themes/<theme-name> directory. You can either add the script to the default.hbs file, which will load the script on all pages of your blog, or you can only load it on post pages by adding it to post.hbs. Note that the latter means that equations will not display correctly on your index pages, within static pages, or on tag pages.

Install your own copy of MathJax (skip if using the CDN)

  1. Clone the entire repository of the latest version of MathJax
  2. Place the folder into <ghost-directory>/content/themes/<theme-name>/assets/js

Add necessary contents to default.hbs

  1. Open default.hbs

  2. If you're using the CDN, insert the following text directly above the line </body> (near the end of the file):
    <script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

    If you're using your own copy, insert the following text directly above the line </body> (near the end of the file):
    <script type="text/javascript" src="{{asset "MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"}}"></script>

  3. Restart Ghost

Insert your equations

You can use TeX and LaTeX notation, MathML notation, AsciiMath notation, or a combination of the three.

Use $$...$$ or \[...\] to indicate "displayed mathematics" (by default, centered and displayed on their own line), or \(...\) to indicate inline equations. You can enable MathJax to recognize $...$ for inline equations if you really want to, but I feel like this is more trouble than it's worth—it makes using actual dollar signs within blog posts a bit of a pain unless you're really cognizant of it.

One caveat is that, because Ghost compiles markdown files into HTML, you will have to be heavyhanded with escape characters. For example, something that normally would be written in LaTeX as

\(H_0: \mu_{A} = \mu_{B}\)

has to be written in the blog editor as

\\(H\_0: \mu\_{A} = \mu\_{B}\\)

Without escaping like this, the markdown editor treats backslashes as escape characters, and underscores as italics. This is relatively well-documented in the MathJax documentation.

Thanks to this original post.