Simple Way to Use Mathjax with Jekyll

December 25, 2024 | 1 Minute Read

To add MathJax to a Jekyll Blog, the easiest option is to simply add the following script into your layout file such as _layouts/head.html

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

To customize how MathJax processes your content, you can add a configuration block before the script tag:

<script>
  MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']],
      displayMath: [['$$', '$$'], ['\\[', '\\]']]
    },
    options: {
      skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
    }
  };
</script>

Add the following code in style.css

code.has-jax {font: inherit; font-size: 100%; background: inherit; border: inherit;}

Usage

`\[display math\]`

`\(inline math \)`

Example

Testing it works for not: \(E = mc^2\)