Add MathJax v3 Support to Jekyll

I was using Mathjax v2 for a while and I heard v3 perform significantly better than v2. Many great tutorials explains explains how to add Mathjax support to Jekyll websites. Some of them only cover Mathjax v2. So here is the brief summary on how to add Mathjax v3 support to your Jekyll website.

  • In the _config.yml located in your root directory, add this line:
    markdown: kramdown
    
  • Create a file called mathjax.html insides _includes/, add these lines (these settings come from the Mathjax documentaion.):
    <script>
    MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']]
    }
    svg: {
      fontCache: 'global'
    }
    };
    </script>
    <script
    type="text/javascript" id="MathJax-script" async
    src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
    </script>
    
  • Add this line in your _includes/head.html before </head>:
    {% include mathjax.html %}
    
  • Now you can write in-line math equations in your markdown file like:
    \\f(x) = x^2\\)
    

    or

    $f(x) = x^2$
    

    It will be render to: \(f(x) = x^2\)

If you are already using Mathjax v2 and wish to just convert it to v3, you may also try this configuration converter. The most useful resource is the official Mathjax documentation.

web other how-to Last modified: 25 Oct, 2020

Author | Edward Hu

Currently a student in University of Texas at Austin and conducting heterogeneous computing research.