KaTeXの導入方法

Published: 2023-10-26

technology Zola KaTeX

Zolaへ\(\KaTeX\)を導入する

KaTeXのドキュメントに書いてあるStarter templateをZolaのtemplatesに追加すると導入できます。

このサイトのテーマはdose使っているため、themes/dose/templates/base.htmlの先頭を以下のように編集しました。

...
    <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>
...

使用方法

\\(\KaTeX\\)

のように記述すると、以下のようにレンダリングされます。

\(\KaTeX\)