gastonsanchez.com: MathJax with Jekyll

gastonsanchez.com: 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 n!k!(n−k)!−−−−−−√n!k!(n−k)! or this one x2+y2=r2x2+y2=r2.

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 page.html (located in my folder _layouts)

http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML
Of course you can choose a different file location in your jekyll layouts.

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/

I’m assuming you are familiar with LaTeX. However, you should know that MathJax does not have the exactly same behavior as LaTeX. 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. Fortunately, you can change these predefined specifications if you want to do so.

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

a2+b2=c2
a2+b2=c2
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(x2)sin(x2)
Here’s another example using type \mathsf

$$ \mathsf{Data = PCs} \times \mathsf{Loadings} $$
which gets displayed as

Data=PCs×Loadings
Data=PCs×Loadings
Or even better:

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

X=ZPT
X=ZPT
If you want to use subscripts like this Xn,pXn,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

Xn,p=An,kBk,p

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s