Julius Nick

LaTeX in Jekyll using MathJax

February 2021 -- LaTeX, MathJax, Jekyll

To talk math related topics, it is essential to be able to render LaTeX code on my webpage. There is a quick way to implement this feature using MathJax. Have a look at the official getting started information. It is quite simple: Add the script somewhere in your pages, so that it is picked up by Jekyll. You now have a JavaScript display engine for mathematical notation working on your page!

Add script for MathJax

I am quoting the required code snipped straight from the official getting started page linked above:

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3.0.1/es5/tex-mml-chtml.js"></script>

I noticed some issues when not placing the LaTeX code inside a <p> or <div>, particularly when using longer statements including text inbetween formulas. Adhering to this convention of using either of the tags fixed the problem for me, with formulas rendering as expected. It’s a good enough fix for my use case, so I will leave it at that.

What does it look like on markdown page?

This is the example from the MathJax getting started documentation.

When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are: \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]

The markdown code that I used to generate this example looks like this:

When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are:
  \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]

It is also possible to use inline LaTeX by wrapping your code in double-dollar-signs like this: $$ 3\ne2 $$, which will give us the following rendered output:


And that’s it…

I hope you enjoyed this article, that’s it for now - thanks for stopping by!

back to top...