Enabling MathJax in Ghost

This short post will share of how to enable MathJax in Ghost blog. MathJax is Javascript display engine to render mathematics equation. The equation is written using LaTex syntax.

The only setup that we have to do is to load MathJax script in all pages of our blog. In Ghost that setup can be done from Code Injection menu as can be seen below.

The code to be injected will be as follow. Or else just go to MathJax documentation to refer to the latest way of injecting the script.

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

Let's enter this sample code that will render quadratic equation formula.

<p>
  When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
  \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]
</p>

Following is how the above latex script will be rendered.

When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]