Add math to your ghost website

Writing about technical stuff may sometimes require rendering of properly formatted math expressions. This can not be accomplished out of the box with ghost. Here we describe two approaches to accomplish it. First, using the mathml specification and second the mathjax javascript library.

Using mathjax js library and TeX style coding

mathjax is a javascript library, which allows to render the TeX style formulas. In order to use it in ghost, we have to inject the script into the header section.

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

You can inject the code for the entire website in settings, or per post (code injection in post settings). Here we use current version as of time of writing. Please refer to the official mathjax documentation. The TeX code

$$ \text{left side} = \frac{N}{M} $$

will render to (note, that in editor it will not be rendered, you can view the result by clicking on "preview" button):

$$ \text{left side} = \frac{N}{M} $$

Using <math> html tag

The mathml spec allows in general to render arbitry math formulas. However it is quite verbose and therefore not practical for complicated expressions. For simple formulas, like fractions it can be useful:

    <math>
        left side = <mfrac><mn>N</mn><mn>M</mn></mfrac>
    </math>

Which will render to the same result.