Integrating KaTeX with Zola

Published: 2023-10-26

technology Zola KaTeX

Integrating \(\KaTeX\) with Zola

You can integrate KaTeX with Zola by adding the Starter template mentioned in the KaTeX documentation to your Zola templates.

Since this site is using the dose theme, I edited the top of themes/dose/templates/base.html as follows:

...
    <head>
        <meta content="IE=edge" http-equiv="X-UA-Compatible" />
        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
        <meta content="width=device-width, initial-scale=1" name="viewport" />

        {% block site_meta %}
        <meta name="robots" content="index,follow">
        <meta name="googlebot" content="index,follow">

        <meta name="google" content="nositelinkssearchbox">
        <meta name="google" content="notranslate">
        {% endblock site_meta %}

        {% block page_meta %}
        {% if config.description %}
        <meta name="description" content="{{ config.description | truncate(length=150) }}">
        {% endif %}
        {% endblock page_meta %}

        {% block css %}
        <link href="{{ get_url(path='style.css', trailing_slash=false) | safe }}" rel="stylesheet" />
        {% endblock css %}
        <title>{% block title %}{{ config.title }}{% endblock title%}</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">

        <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8" crossorigin="anonymous"></script>

        <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"
            onload="renderMathInElement(document.body);"></script>
    </head>
...

How to use

When written like

\\(\KaTeX\\)

it will be rendered as follows:

\(\KaTeX\)