LaTeX in Jekyll

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.