全ページで KaTeX を有効にする場合

使っている theme のディレクトリ内にある layouts/partials/footer.html をドキュメントルートの layouts/partials/footer.html にコピーして，下記を追記する¹．

最新のバージョンを利用するには公式を参照されたい．

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    renderMathInElement(document.body, {delimiters: [
      {left: "$$", right: "$$", display: true},
      {left: "$", right: "$", display: false}]
    });
  });
</script>

4行目以降では数式の開始位置と終了位置をディスプレイ数式 (display: true) の場合とインライン数式 (display: false) の場合について定義している²．

integrity は参照しているリソースのハッシュ値で，セキュリティを気にして付けておくべきらしい³．

一部のページで KaTeX を有効にする場合

いくら KaTeX が軽いとはいえ，数式のないページでまで KaTeX を読み込んでしまうのはよろしくない……と思う．

私はホーム画面と，YAML フロントマターに math: true を指定した記事のみに KaTeX を適用にすることにした．

ホーム画面でも KaTeX をロードするのは，各記事のサマリーに数式が含まれている場合に対処するためである．

それには上述の HTML と Hugo のテンプレート記法を組み合わせればよい⁴．

{{ if or (.IsHome) ($.Param "math") }}
  <!-- ここに上述の HTML コードを記述 -->
{{ end }}

ディスプレイ数式

$$
f(x)= ∑_{k=0}^{∞} \frac{ f^{(k)}(x_0)}{n!} \left( x-x_0 \right)^k
$$

は

\[ f(x)= ∑_{k=0}^{∞} \frac{ f^{(k)}(x_0)}{n!} \left( x-x_0 \right)^k \]

になる．

インライン数式

$\LaTeX{}$ は \(\LaTeX{}\) になる．