Hugo(Archie)でKaTeXを使えるようにする
を参考に（というかほぼそのままに）、Hugoで生成したWebページでもKaTeXを使えるようにしたメモ。
Archieをテーマとして用いている。
KaTeXとは
KaTeX-Githubによると、Webサイト上でTeXの数式をレンダリングするためのJavaScriptのライブラリのことであり、速くて使うのが簡単なのが特徴だそうだ。 Webサイト上でTeXの数式を表示する別のライブラリとしてMathJaxというのがあるそうだが、それと比較するとKaTeXのほうが速く表示されるそうである。
KaTeXの設定ファイル
基本的にJavaScriptのコードの部分はHTMLファイルから分離させたいので、layouts/partial/katex.htmlを作り
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css" integrity="sha384-Um5gpz1odJg5Z4HAmzPtgZKdTBHZdw8S29IecapCSB31ligYPhHQZMIlWLYQGVoc" crossorigin="anonymous">
<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.js" integrity="sha384-YNHdsYkH6gMx9y3mRkmcJ2mFUjTd0qNQQvY9VYZgQd7DcN7env35GzlmFaZ23JGp" crossorigin="anonymous"></script>
<!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/contrib/auto-render.min.js" integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl" 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>
を書き込む。
設定ファイルの読み込み
layouts/partial/katex.htmlを作るだけでは読み込まれないので、もともと読み込まれるファイルlayouts/partial/footer.htmlに
{{ with .Params.katex }}
{{ partial "katex.html" . }}
{{ end }}
を追記して読み込まれるようにする。
パラメータkatexがtrueのときのみKaTeXが有効になる。
テンプレート
パラメータkatexを忘れないようにするため、archetypes/default.mdにテンプレとして
katex: false
を追記しておく。
これでデフォルトでKaTeXは無効になっている。
有効にしたいときのみkatex: trueにする。
katexの記述がまったくなければもちろん無効を意味する。
テスト
インラインの数式は$y=ax^2+bx+c$が$y=ax^2+bx+c$として表示され、行立ての数式は
$$
\int_{-\infty}^\infty \mathrm{d}x \exp(-x^2) = \sqrt{\pi}
$$
が $$ \int_{-\infty}^\infty \mathrm{d}x \exp(-x^2) = \sqrt{\pi} $$ として表示される。