Simply Way to Render Math Equations for Jekyll using Katex

KaTeX is a very fast, easy-to-use JavaScript library for TeX math rendering on the Jekyll websites. It also supports various browsers including IE, Chrome and Firefox … Since my current theme does not support the math render in default, I plan to implement Katex. Luckily, it’s not so diffucult to do that.

1. Employ Katex in theme

You can download KaTeX and host it on the sever or you can employ it online. I choose the second way. To do that, I insert the below code in the head.php which we can find in _include folder

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.8.3/katex.min.css" integrity="sha384-B41nY7vEWuDrE9Mr+J2nBL0Liu+nl/rBXTdpQal730oTHdlrlXHzYMOhDU60cwde" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.8.3/katex.min.js" integrity="sha384-L9gv4ooDLrYwW0QCM6zY3EKSSPrsuUncpx26+erN0pJX4wv1B1FzVW1SvpcJPx/8" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.8.3/contrib/auto-render.min.js" integrity="sha384-RkgGHBDdR8eyBOoWeZ/vpGg1cOvSAJRflCUDACusAAIVwkwPrOUYykglPeqWakZu" crossorigin="anonymous"></script>

Note: the third script is used to render the math equations automatically.

2. Calling render function in your post

We need to call the exposed fuction renderMathInElement in a script tag before your body tag in your post. I do it by simply inserting the below script in the post.html which is located in _layout folder.

<script>
      renderMathInElement(
          document.getElementById("your post id"),
          {
              delimiters: [
                  {left: "$$", right: "$$", display: true},
                  {left: "\\[", right: "\\]", display: true},
                  {left: "$", right: "$", display: false},
                  {left: "\\(", right: "\\)", display: false}
              ]
          }
      );
</script>

Note: remember to change “your post id” correctly. More detail can be found in this page

3. Test the render function:

1. Inline

    Test 1: $f(x) = x^2$    # Inline Render
   
    Test 2: $$f(x) = x^2$$  # New line, center
   
    Test 3: \\[f(x) = x^2\\] # New line, center
   
    Test 4: \\(f(x) = x^2\\) # Inline
   

Result:

Test 1: $f(x) = x^2$

Test 2: $f(x) = x^2$

Test 3: \[f(x) = x^2\]

Test 4: \(f(x) = x^2\)

OOp! Test 2 does not show anything. But, it’s still fine for me ^^!.