Yet another guide for adding Mathjax 3 to Jekyll (in 2021)

There are various guides floating around on the internet about adding MathJax to a jekyll template, and I’m adding to that list for two reasons: Seriously, there. are. so. many

  • Some of the minutiae of the steps have changed since then, namely the CDN.
  • I could not find a guide replete with information regarding inline maths.

I won’t go into why I chose mathjax over katex, but I will say that mathjax is more flexible with compatibility, and that’s what I care about hereGo read this, because I am no authority on the subject but this article is. .

Installation

The particular theme I’m using for this is kliseYou can find the repo here , but in theory this should hold for any jekyll template.

In our template of choice, there will be an _layouts directory, with a header.html file. Within that, you’ll want to insert the code below into the <head><\head>:

  {% if page.usemathjax %}
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
      TeX: { equationNumbers: { autoNumber: "AMS" }},
      });
    </script>
    <script type="text/javascript" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js?config=TeX-AMS-MML_HTMLorMML"></script>
  {% endif %}
  

and as mentioned by infinite guides before me, you will also need to make sure that you’re using kramdown for your markdown renderer. You can find that setting in your root folder at _config.yml. You should have something that looks like this:

  # Build settings
  markdown: kramdown
  

Note that one reason why this guide exists is because that mathjax cdn is constantly changing, and it’s likely that by the time you read this, you may need to find yourself an updated cdn link. As of writing, this is one that works.

Usage

Below is an example of maths using mathjax.

Any page needing maths should start with the frontmatter:

usemathjax: true

and to insert maths, you would do as with TyporaTypora has been a godsend for me during covid, for taking notes as well as answering my statistics exam with it. /pandoc/TeX, with the $$ markers.

$$ 
\begin{align*}
y = y(x,t) &= A e^{i\theta} \\
&= A (\cos \theta + i \sin \theta) \\
&= A (\cos(kx - \omega t) + i \sin(kx - \omega t)) \\
&= A\cos(kx - \omega t) + i A\sin(kx - \omega t)  \\ 
&= A\cos \Big(\frac{2\pi}{\lambda}x - \frac{2\pi v}{\lambda} t \Big) + i A\sin \Big(\frac{2\pi}{\lambda}x - \frac{2\pi v}{\lambda} t \Big)  \\
&= A\cos \frac{2\pi}{\lambda} (x - v t) + i A\sin \frac{2\pi}{\lambda} (x - v t)
\end{align*}
$$
  

which would then produce the following maths:

\[\begin{align*} y = y(x,t) &= A e^{i\theta} \\ &= A (\cos \theta + i \sin \theta) \\ &= A (\cos(kx - \omega t) + i \sin(kx - \omega t)) \\ &= A\cos(kx - \omega t) + i A\sin(kx - \omega t) \\ &= A\cos \Big(\frac{2\pi}{\lambda}x - \frac{2\pi v}{\lambda} t \Big) + i A\sin \Big(\frac{2\pi}{\lambda}x - \frac{2\pi v}{\lambda} t \Big) \\ &= A\cos \frac{2\pi}{\lambda} (x - v t) + i A\sin \frac{2\pi}{\lambda} (x - v t) \end{align*}\]

Inline maths can be written with the \\( and \\) characters, producing inline maths such as \(\delta(t) \xrightarrow{\mathscr{F}} 1\).

Hope that helps, it’s what I’m doing here and it works alright Most of the above is accomplished with thanks to guides by Alan Duan and Zichen Vincent Zhang .