Add Syntax Highlighting and Equations to Ghost

by Quintessence

If you're running to run a blog about programming and math, as I plan to do, it's useful to be able to nicely display both mathematical equations and code with syntax highlighting. Luckily, there are two JS libraries that assist with exactly that: MathJax and Prism. To use these, go into your Content section and paste the following in the Blog Header section:

<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/latest/prism.min.css" rel="stylesheet" />
<script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

And then paste the following in the Blog Footer section:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/latest/prism.min.js" ></script>
<script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

Since I am using latest for both libraries that means I am currently Prism v1.6.0 and MathJax v2.7.0 with Ghost v0.11.3. If you would like to use a specific version of either instead of just latest, please refer to the CDN pages:

How to use

Prism

To get this:

#!/bin/bash

echo -e "Hello, this is a simple BASH script.\nGoodbye, $(whoami)!"

Simply do this:

```bash

#!/bin/bash

echo -e "Hello, this is a simple BASH script.\nGoodbye, $(whoami)!"
```

To find the list of language tokens (e.g. bash and html above, python, etc.) please check out the Prism documentation.

MathJax

To get this:

$
F(x) = \int_{x_{0}}^{\infty}f(x)dx
$

Simply use $, like this:

$
F(x) = \int\_{x\_{0}}^{\infty}f(x)dx
$

Notice that the _ are escaped so that they aren't rendered as italics and bork the equation. The same will be true for * or any other characters that are special characters in Markdown.