MathJax with Jekyll

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 [(]( 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```) {% highlight r %} {% endhighlight %} 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: {% highlight r %} {% endhighlight %} ### 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 []( 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 {% highlight r %} $$a^2 + b^2 = c^2$$ {% endhighlight %} To display inline math use ```\\( ... \\)``` like this ```\\( sin(x^2) \\)``` which gets rendered as \\( sin(x^2) \\) Here's another example using type ```\mathsf``` {% highlight r %} $$ \mathsf{Data = PCs} \times \mathsf{Loadings} $$ {% endhighlight %} which gets displayed as $$ \mathsf{Data = PCs} \times \mathsf{Loadings} $$ Or even better: {% highlight r %} \\[ \mathbf{X} = \mathbf{Z} \mathbf{P^\mathsf{T}} \\] {% endhighlight %} 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} ```: {% highlight r %} $$ \mathbf{X}\_{n,p} = \mathbf{A}\_{n,k} \mathbf{B}\_{k,p} $$ {% endhighlight %} will be displayed as \\[ \mathbf{X}\_{n,p} = \mathbf{A}\_{n,k} \mathbf{B}\_{k,p} \\]