WebページでKaTeXを使う #JavaScript

やりたいこと

自分で作ったHTMLのWebページでKaTexがパースされるようにしたい。
ページ読み込みのタイミングではなく、ユーザーのアクションに合わせてパースされるようにしたい。

背景

サーバー上のcsvをjavascriptで読み取ってhtmlに表示するというwebページで、KaTeXを埋め込む必要があるということになったのですが、公式HPのStarter Templateを使おうとしたら上手くいきませんでした。
今回はkatex.jsをサーバーに置いて呼び出す方法で対応することになったので、備忘録として書きます。

準備

こちらからzipをダウンロードして、中のkatexフォルダをサーバーにアップロードしておきます。

コードを書く

HTMLのheadタグ内にkatex.cssとkatex.jsへのリンクを記載します。

<head>
    <link rel="stylesheet" href="PATH/TO/katex/katex.min.css">
    <script defer src="PATH/TO/katex/katex.min.js"></script>
    <script defer src="PATH/TO/katex/contrib/auto-render.min.js"></script>
</head>

次にjavaScriptでイベントを定義して、イベントが発火したときにKaTeXがパースされるようにしたいと思います。ページ内に最初から数式が入力されている場合はイベントを自作する必要はなく、DOMContentLoaded等を使えばいいです。今回のケースでは最初からページに数式があるわけではなく、ユーザーアクションによってcsvが読み込まれ、そのcsvに数式が記載されている、というケースでしたのでこのような仕組みにしました。

//javaScript

var katex_event = new Event('katex');

// katexイベントを発生させる関数
function triggerKatex() {
    document.dispatchEvent(katex_event);
}

ユーザーアクションと連動してtriggeKatex()が動き、イベントが発火するという流れです。
このイベントに対応してKeTeXが表示されるようにHTMLのbodyタグに以下を追加します。

<body>
    ...(HTMLページの中身)...

    <script>
        document.addEventListener("katex", function() {
            renderMathInElement(document.body, {
                delimiters: [
                    {left: "$$", right: "$$", display: true},
                    {left: "\\[", right: "\\]", display: true},
                    {left: "$", right: "$", display: false}
                ]
            });
        });
    </script>
</body>

delimiters内のdisplayをtrueにするとブロック表示になり、falseにするとインライン表示となります。
試していませんが、おそらく自前でdilimiterを指定することもできるので、必要に応じて追加や削除を行ってください。