You wanna write complicated math equations on your Jekyll website? Here is the right place for you.

MathJax is a JavaScript library that displays mathematical notation in web browsers and we can use it within two steps. Let’s get started.

Create a HTML file to import the MathJax script

First, we create a new file called mathjax.html and put it inside the folder _includes of your Jekyll project. Create the _includes folder as well if you don’t have one.

_includes/mathjax.html
{%- if page.mathjax != false -%}
<script
  type="text/javascript"
  src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
></script>
{%- endif -%}

Include the HTML file in a layout file

Then, we include the mathjax.html inside the layout file we want to give math equation writing functionality. For me it is the post.html inside the _layouts folder. Also set mathjax to true in the front matter then we are good to go!

_layouts/post.html
---
mathjax: true
---

{%- include mathjax.html -%}

That’s it! Now we can write math formulas freely on a Jekyll website.

References