Molly White
Software engineer, editor and arbitrator on Wikipedia, feminist, Twitter bot commander, unabashed cat lady.

How to display mathematical equations in Ghost

\[f(a) = \frac{1}{2\pi i} \oint_\gamma \frac{f(z)}{z-a}, dz\] Cauchy's integral formula rendered using MathJax

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 also install your own copy. 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. Download the zipfile of the latest version of MathJax
  2. Unzip the folder into <ghost-directory>/content/themes/<theme-name>/assets/js

Add to default.hbs

  1. Open default.hbs
  2. If you're using the CDN, insert the following text directly above the line containing (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 containing (near the end of the file):
    <script type="text/javascript" src="{{asset "MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"}}"></script>  
    
  3. Restart Ghost

Add to post.hbs

  1. Open post.hbs
  2. If you're using the CDN, insert the following text all the way at the bottom, beneath {{/post}}:
    <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 all the way at the bottom, beneath {{/post}}:
    <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. I use LaTeX because I'm most familiar with it.

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.

comments powered by Disqus