Displaying Math Equations in Jekyll Using MathJax

Introduction

In this blog post, we’ll discuss how to display math equations in a Jekyll site using MathJax, a popular JavaScript library for rendering mathematical notation.

Step-by-Step Guide

Adding MathJax to Your Jekyll Site

Insert MathJax Script: Add the following script to the <head> section of your HTML layout file (in _layouts or the default layout of your theme):

<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>

Configure MathJax (Optional): Customize MathJax, such as changing delimiters for inline and display math. Here’s an example:

<script>
  MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\(', '\)']],
      displayMath: [['$$', '$$'], ['\[', '\]']]
    },
    svg: {
      fontCache: 'global'
    }
  };
</script>

Writing Math Equations

Inline Math: Enclose your LaTeX code within $...$ for inline equations (e.g., $x + y = z$ ).
Displayed Math: Use $$...$$ for equations that should be on their own line (e.g., $$x + y = z$$).

Troubleshooting

If inline math isn’t rendering:

Check Configuration: Ensure MathJax is configured to recognize $...$ as inline math.
Markdown Processing: Add space around your inline math, like $ x + y = z $ .
Escape Characters: Try escaping the dollar signs (e.g., \$x + y = z\$).

Conclusion

With these steps, you should be able to display beautiful mathematical equations in your Jekyll site.

Thank you for reading!

jeckyll mathjax blog post