Using MathJax with Jekyll

Chris Taylor picture Chris Taylor · Jun 11, 2012 · Viewed 20.8k times · Source

I have a Jekyll blog and I want to use MathJax with it, in the sense that I want to be able to type something like

$$\sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6}$$

in my markdown files, and have the correct LaTeX expression generated with MathJax, in a similar way to how it is done at math.stackexchange.

What is the easiest way to do this? Currently I have the file jsmath.js (GitHub gist) in my directory, and I thought I could have a simple file named mathjs in my _includes directory with the line

<script src="path/to/jsmath.js></script>

and include that in each post via

{% include mathjs %}

but this doesn't seem to work - when I run jekyll --server the page is generated, but none of the content is visible.

Am I going about this the right way? Is there a better way to use MathJax with Jekyll?

Answer

cboettig picture cboettig · Jun 19, 2012

Certainly you can use mathjax with Jekyll. To get this working make sure that

  1. If you're writing your post in markdown, your markdown interpreter isn't hammering your mathjax input. The best way to protect it I have found is to always put display math in <div> elements and inline math in <span> elements, which most markdown interpreters will leave alone.
  2. Is the javascript line displaying correctly in the html source? I find it easier and faster to point to the mathjax CDN rather than provide my own copy. Try using the line

    <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

(Those configuration options allow you to use more tex notation to start your math environment, such as \begin{equation}, etc).

Perhaps there is some issue with your jsmath.js script; the CDN version will be faster and probably more reliable. (I have the javascript load in my footer on every page, but of course your strategy with include makes sense if you don't want to load the javascript when you don't need it.)

We could help more if you give us a link to your blog? You can see some examples on my blog (has link to Jekyll setup on github too if that helps).