How to Enable Mathematical Typesetting on Your Ghost Blog In Under 10 Minutes

Note: Please view this post on the website.  It will not render correctly in email.

Sometimes you just need a formula.

Try explaining to your friends that there are exactly  20 ways to split 6 people into 2 teams of 3 without saying %%\frac{6!}{(6-3)!3!} = \frac {6*5*4}{6}=20%%.

The primary language of mathematical typesetting is, and has been for decades, LaTex.  In order to make use of the solution in this post, you will need to know it. For example, the equation above is expressed in LaTex as   \frac{6!}{(6-3)!3!} = \frac {6*5*4}{6}=20

If LaTex is new to you, check out some of the readily available tutorials and cheat sheets.

This post will walk you through installing KaTex on your ghost.io site.  KaTex is an open source LaTex renderer developed by and for Khan Academy.  Please note that , using this solution, blog posts with mathematics in them will not render correctly in email form.  Without further preamble, here are the instructions.

Install KaTex using the code injection feature of Ghost

Navigate to you're settings, select Code Injection and then paste the text below into the Site Header text box.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css" integrity="sha384-vKruj+a13U8yHIkAyGgK1J3ArTLzrFGBbBc0tDp4ad/EyewESeXE/Iv67Aj8gKZ0" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.js" integrity="sha384-PwRUT/YqbnEjkZO0zZxNqcxACrXe+j766U2amXcgMg5457rve2Y7I6ZJSm2A0mS4" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"
    onload="renderMathInElement(document.body, {delimiters: [
  {left: '$$', right: '$$', display: true},
  {left: '%%', right: '%%', display: false}
]});"></script>

Usage

To turn a LaTex expression into typeset mathematics on your site, surround it with double percentage signs or double dollar signs.  Use percentage signs for inline expressions and dollar signs for blocks.

%%\pi r^2%%

$$\pi r^2$$

Inline expressions like %%\pi r^2%% do not interrupt the flow of text while block expressions like $$y=mx+b$$ are larger and appear on a separate line.

Final Note

If you are familiar with LaTex then you will know that the choice of double percentage signs for a delimiter is unconventional.   This was done out of necessity and after some experimentation with the conventional options like \\( LATEX \\). Although I do not understand the reason, it seems that delimiters containing the backslash character were causing a problem.

That's all for now. Happy typesetting!