When I was writing , I decided to use \(\LaTeX\) to write some formulae.

After googling jekyll latex support, I found this article. It took me to another blog post by a high school student from Boston, which provided a nice tutorial that adds LaTeX support on Jekyll blogs by using some tricks to let MathJax, an open source JavaSrcipt display engine for mathematics, work properly in Jekyll environment.

Generally speaking, the issue that every Jekyll blog has is that when Markdown will interpret all tags even if some of them are actually LaTeX tags. For more information, please refer to this blog post.

The way to we use MathJax is to put LaTeX code in a code block, using acute symbol: `. But MathJax won’t render text between <code> tags by default since in most cases code between <code> tags are not LaTeX code.

To solve this issue, we need to add some JavaScript and some CSS (optional).

In Main Layout File

In your main layoug file, add the following code anywhere. I would like to put all my JavaScript code at the end of the file, only before the closing <\html> tag.

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script>
MathJax.Hub.Config({
    tex2jax: {
		skipTags: ['script', 'noscript', 'style', 'textarea', 'pre']
	}
});
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';
	}
});
</script>

Line 1 is to include MathJax. MathJax.Hub.Config is to configure which tags to skip.MathJax.Hub.Queue adds a function to add string ` has-jax` to all LaTeX code blocks.

In Main CSS File

In your main CSS file, add the following code to set style for LaTeX code. On example would be:

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

Examples

Here I have some examples taken from the MathJax Demo Page.

The Lorentz Equations

The Cauchy-Schwarz Inequality

A Cross Product Formula

The probability of getting \(k\) heads when flipping \(n\) coins is

An Identity of Ramanujan

\[ \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\ldots} } } } \]

A Rogers-Ramanujan Identity

\[ 1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, \quad\quad \text{for $|q|<1$}. \]

Maxwell’s Equations

\[ \begin{aligned} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned} \]