Using MathJax with Jekyll

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).


I wrote a blog post about setting up MathJax a while back: Latex Math Magic

In essence you have to stop the Markdown from messing with the MathJax.

I ended up using code blocks, which worked fine for me. So either using at least 4 spaces before you write something or using the acute symbol: `; Unfortunately MathJax is skipping <code> tags by default since it doesn’t want to convert code that it shouldn’t.

So somewhere in your main layout file you have to add a little javascript code:

MathJax.Hub.Config({
  tex2jax: {
    skipTags: ['script', 'noscript', 'style', 'textarea', 'pre']
  }
});

Additionally we have to tell MathJax to ignore non-latex code-blocks or normal code blocks:

MathJax.Hub.Queue(function() {
    var all = MathJax.Hub.getAllJax(), i;
    for(i=0; i < all.length; i += 1) {
        all[i].SourceElement().parentNode.className += ' has-jax';
    }
});

At his point all our latex code blocks are going to have the has-jax string in their class name. Therefore we can apply some simple styling in our css sheets to give it our own styling.

code.has-jax {font: inherit; font-size: 100%; background: inherit; border: inherit;}

Might not be the best approach but it worked for my blog for the past years and I never encountered any further problem with it.


If you are using kramdown as your markdown flavor, it's easy. Kramdown has built-in support for mathjax.

  1. Add this before the </head> tag in your default layout.

    <script type="text/javascript" async 
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?
config=TeX-AMS-MML_HTMLorMML"></script>

  2. Set this to true at _config.yml, after the markdown: kramdown line.

    mathjax: true

  3. Done. For renedering Mathjax

    • inline, use \( ... \),

    • block, use \[ ... \].

      The only thing to look out for is the escaping of the backslash when using markdown, so the delimiters become \\( ... \\) and \\[ ... \\] for inline and block maths respectively.

  4. Here is an example of MathJax inline rendering \\( 1/x^{2} \\), and here is a block rendering: \\[ \frac{1}{n^{2}} \\].

I use this on my blog.


If you have sufficient control over the publishing process (e.g. you are running Jekyll yourself), an easy solution is to switch the markdown parser to one that supports TeX. For example, using kramdown:

gem install kramdown

Change the markdown line in _config.yml to

markdown: kramdown

and add something like 

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

to _layouts/default.html. Now you can simply mark any mathematics in your posts with $$.

Tags:

Jekyll

Mathjax

Recent Posts