Add mathjax support in Jekyll with MM theme

Add custom header file

To most accessible way to enable Mathjax is through a Content Distribution Network (CDN), which you can include in your pages and use it right away.

• Create custom.html file at website_root/_include/head/
• Add following contents to the custom.html. If the file already exists, attach the contents at the end of the file.

{% if page.mathjax %}
    <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/es5/tex-mml-chtml.js"></script>
{% endif %}

• The first script is to include polyfill library for earlier browser version compatibility.
• The second script is to load the latest 3.x.x version of Mathjax from the server.
• The if statement sets mathjax to be a parameter in YAML Front Matter. This is designed to fasten page loading speed for pages without mathjax requirement.

Set Markdown renderer in config file

• Set markdown: kramdown inside _config.yml

Add mathjax in posts

• Include mathjax inside YAML Front Matter and set it to true

---
mathjax: true
---

• Use $$ to enclose equations
  • inline mode with only $$

This is equation $$ 3^2 + 4^2 = 5^2 $$

This is equation \(3^2 + 4^2 = 5^2\)

• display mode with empty line and $$

This is equation

$$ 3^2 + 4^2 = 5^2 $$

This is equation

\[3^2 + 4^2 = 5^2\]