この記事では，KaTeXでLaTeXと同じ数式表記（ディスプレイ数式に\[...\]，インライン数式に$..$）を使い，それをHugoで生成するページで表示させます。KaTeXでLaTeX表記を使う方法を説明したサイトは多く見つかりますが，中には情報が古くて最新版では動かず，あるいはHugoと組み合わせると動作しないケースもあります。ここでは，2019年5月現在で入手できるKaTeXとHugoの組み合わせで動作が確認できた方法を記します。以下のバージョンを使いました。
- Hugo 0.55.6
- KaTeX 0.10.2
KaTeXでLaTeXと同じ書式で数式を記述する
KaTeXは，MathJaxよりも軽量で，高速に数式をレンダリングします。KaTeXのデフォルトの記法では，ディスプレイ数式には$$..$$を，インライン数式には\(...\)を使うことになっています。HTML内にスクリプトを記述すれば，LaTeX同様にディスプレイ数式を\[...\]で，インライン数式を$...$で記述できます。この方法は，以下のサイトで説明されています。
KaTeXは cdn.jsdelivr.net が提供するものを使います。以下の内容をHTMLの<head></head>内に書き込めば，KaTeXのデフォルト表記に加えて，LaTeX同様の記述が可能になります。
<!-- 標準的な設定 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.css" integrity="sha384-yFRtMMDnQtDRO8rLpMIKrtPCD5jdktao2TV19YiZYWMDkUR5GQZR/NOVTdquEx1j" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.js" integrity="sha384-9Nhn55MVVN0/4OFx7EE5kpFBPsEMZxKTCnA+4fqDmg12eCTqGi6+BB2LjY8brQxJ" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(
document.body,
{
delimiters: [
{left: "$$", right: "$$", display: true},
{left: "\\[", right: "\\]", display: true},
{left: "$", right: "$", display: false},
{left: "\\(", right: "\\)", display: false}
]
});
});
</script>
HugoでKaTeXを使い，LaTeX同様の表記を受け付ける
意図通りに認識されない可能性
ヘッダを記述するlayouts/partials/header.htmlを開き，上に示した内容を追加します。ただし，\がエスケープする記号とマークダウン表記が対立することがあり，エスケープがうまく働かない可能性があります。
いくつか試した結果，エスケープの有無と変換結果は以下の通りになりました。なお，この結果はテンプレートによって異なるかもしれません。自分がよく使う表記が認識されるよう，設定を練る必要があります。
| テンプレート設定 | 本文の記述 | 表示 | |
|---|---|---|---|
| ディスプレイ数式 | \\[...\\] |
\\[A+B\\] |
$A+B$ |
\[A+B\] |
[A+B] | ||
[A+B] |
[A+B] | ||
\[...\] |
\\[A+B\\] |
\[ A+B \] | |
\[A+B\] |
$A+B$ | ||
[A+B] |
$A+B$ | ||
| インライン数式 | \\(...\\) |
\\(A+B\\) |
$A+B$ |
\(A+B\) |
(A+B) | ||
(A+B) |
(A+B) | ||
\(...\) |
\\(A+B\\) |
\( A+B \) | |
\(A+B\) |
$A+B$ | ||
(A+B) |
$A+B$ |
数式レンダリングのオン・オフをファイルごとに切り替える
さて，もし文書ごとに数式をレンダリングするか否かを切り替えたいなら，新たにページ変数を作って動作を切り替えるとよいでしょう。たとえば，以下の例では，マークダウンファイルの先頭でkatexという変数を定義しています。
title: "Test Page"
date: 2019-05-18T13:55:59+09:00
draft: false
katex: true
この変数がtrueのときだけ数式をレンダリングできるようにします。さきほど紹介したlayouts/partials/header.htmlの<head></head>内に書くべきタグ全体を，以下のようなHugo関数で囲みます。
{{ with .Params.katex }}
<!-- 上記のlinkとscriptタグをここに記述 -->
{{ end }}
あとは通常の手順でhugoを動かせば，KaTeXを利用するHTMLファイルができあがります。