MathJax with Jekyll

Posted on | In

One of the rewards of switching my website to Jekyll is the ability to support MathJax, which means I can write LaTeX-like equations that get nicely displayed in a web browser, like this one \( \sqrt{\frac{n!}{k!(n-k)!}} \) or this one \( x^2 + y^2 = r^2 \).

What’s MathJax?

If you check MathJax website (www.mathjax.org) you’ll see that it is an open source JavaScript display engine for mathematics that works in all browsers.

How to implement MathJax with Jekyll

I followed the instructions described by Dason Kurkiewicz for using Jekyll and Mathjax.

Here are some important details. I had to modify the Ruby library for Markdown in my _config.yml file. Now I’m using redcarpet so the corresponding line in the configuration file is: markdown: redcarpet

To load the MathJax javascript, I added the following lines in my layout post.html (located in my folder _layouts)

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

Of course you can choose a different file location in your jekyll layouts.

Note that by default, the tex2jax preprocessor defines the LaTeX math delimiters, which are \\(...\\) for in-line math, and \\[...\\] for displayed equations. It also defines the TeX delimiters $$...$$ for displayed equations, but it does not define $...$ as in-line math delimiters. To enable in-line math delimiter with $...$, please use the following configuration:

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [['$','$'], ['\\(','\\)']],
    processEscapes: true
  }
});
</script>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>

A Couple of Examples

Here’s a short list of examples. To know more about the details behind MathJax, you can always checked the provided documentation available at http://docs.mathjax.org/en/latest/

Let’s try a first example. Here’s a dummy equation:

\[a^2 + b^2 = c^2\]

How do you write such expression? Very simple: using double dollar signs

$$a^2 + b^2 = c^2$$

To display inline math use \\( ... \\) like this \\( sin(x^2) \\) which gets rendered as \( sin(x^2) \)

Here’s another example using type \mathsf

$$ \mathsf{Data = PCs} \times \mathsf{Loadings} $$

which gets displayed as

\[\mathsf{Data = PCs} \times \mathsf{Loadings}\]

Or even better:

\\[ \mathbf{X} = \mathbf{Z} \mathbf{P^\mathsf{T}} \\]

is displayed as

\[ \mathbf{X} = \mathbf{Z} \mathbf{P^\mathsf{T}} \]

If you want to use subscripts like this \( \mathbf{X}_{n,p} \) you need to scape the underscores with a backslash like so \mathbf{X}\_{n,p}:

$$ \mathbf{X}\_{n,p} = \mathbf{A}\_{n,k} \mathbf{B}\_{k,p} $$

will be displayed as

\[ \mathbf{X}_{n,p} = \mathbf{A}_{n,k} \mathbf{B}_{k,p} \]