LaTeX in Jekyll

less than 1 minute read

Katex Integration

How to use it

I’ve added support for KaTeX. All you have to do is include katex: true in the YAML Front Matter

---
katex: true
---

How it works

  1. The custom header loads the KaTeX javascript/css.
     {% if page.katex %}
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
     <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"></script>
     <script>
             document.addEventListener("DOMContentLoaded", function() {
                     renderMathInElement(document.body, {
                             // ...options...
                     });
             });
     </script>
     {% endif %}
    

Now, with \(\KaTeX\) I can render pretty math in the browser

\[f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi\]

Thanks to Type Theme for the inspiration/code.

Tags:

Updated: