I recently migrated this site to Ghost, and since some of what I write about is technical, I wanted to have the ability to enter LaTex-style mathematical equations and have them display nicely.

Mathjax is an excellent cross-browser solution, and it turned out to be easy to add to Ghost. For basic support, all you have to do is insert

<script type="text/javascript" async  
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">  
</script>  

into your theme. This can be done using the 'Code Injection' area in the admin panel, or by directly adding the code into a theme file, such as default.hbs.

With that, you can type equations into your editor using LaTex-style input and get beautifully rendered results. You use $$ ... $$ to designate a mathematical equation, so if I type $$ y = \int_0^1 {1\over x} dx $$ into the Ghost editor, I will get:

$$ y = \int_0^1 {1\over x} dx $$

We're not quite done, though. $$ ... $$ works great for equations that occupy a whole line, but we also need a delimiter for inline math, like this :${1\over x}$.

Adding the $ delimiter

By default, the inline math delimiter is \( ... \), but I'm used to using single dollar signs for this purpose (that's the behavior for putting math in Python docstrings rendered by sphinx, for example). To make $ ... $ work, you need to add the following before the code snippet above:

<script type="text/x-mathjax-config">  
   MathJax.Hub.Config({
     tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']],
     processEscapes: true}          
   });
</script>  

Now, you can use $$ ... $$ for whole-line equations and $ ... $ for inline math. If you want to use a single dollar sign normally (as in, \$1), you simply precede it with a backslash, like this: \$.

Automatic equation numbering (added 8/17/16)

If you want to enable automatic equation numbering, insert the following line just below the tex2jax configuration line:

TeX: { equationNumbers: { autoNumber: "AMS" } }  

The final code snippet looks like this:

<script type="text/x-mathjax-config">  
   MathJax.Hub.Config({
     tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']],
     processEscapes: true},    
     TeX: { equationNumbers: { autoNumber: "AMS" } }      
   });
</script>  

share Share this: