Post

How to display math expression on the pages using Jekyll

Posted
By 信雄湊
1 min read

How to render Markdown math expressions on the GitHub Pages site using Jekyll

  1. Ensure Kramdown is the Markdown Processor: GitHub Pages uses Kramdown as the default Markdown processor, which supports LaTeX-style math syntax. Verify that the _config.yml file does not specify a different processor. If it does, remove or comment out the markdown line to use the default Kramdown processor. (alanduan.me)

  2. Include the MathJax Script: MathJax is a JavaScript library that renders LaTeX math expressions in web pages. To include MathJax in the Jekyll site:
    • Create a file named mathjax.html in the _includes directory with the following content:
      1
2
3

      <script type="text/javascript" id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>

      (deyloop.github.io)

    • In the _layouts/default.html file, include the mathjax.html file within the <head> section:
      1
2
3
4
5
6

           
  <script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>

      (jojozhuang.github.io)

  3. Enable MathJax in Specific Pages: To enable MathJax on pages for math expression:
    • In the front matter of the Markdown file, add:
      1
2
3
4
5
6

      ---
layout: post
title: the Post Title
date: 2025-01-31
mathjax: true
---

      (jojozhuang.github.io)

  4. Write Math Expressions: Use LaTeX syntax to write math expressions in the Markdown files:
    • Inline math:
      1

      This is an inline math expression: $$a^2 + b^2 = c^2$$.

      This is an inline math expression: \(a^2 + b^2 = c^2\).

    • Display math:
      1
2

      This is a display math expression:
\begin{equation}\int_{a}^{b} f(x) \, dx\end{equation}

      This is a display math expression: \begin{equation}\int_{a}^{b} f(x) \, dx\end{equation} (jojozhuang.github.io)

  5. Handle Potential Conflicts: Be aware that some Markdown processors may interfere with MathJax rendering. If issues exist, consider using the raw and endraw tags to prevent the processor from interpreting math syntax:
    1

     $$a^2 + b^2 = c^2$$

    (ishxiao.com)

Computer Science
Utils
This post is licensed under CC BY 4.0 by the author.