HugoでKaTeXを使えるようにする方法

Step1　katex.htmlファイルを作る

　KaTeXを使えるようにするためには、KaTeXのJavascriptファイルとCSSファイルを読み込む必要があります。 それらを読み込むためにkatex.htmlファイルをlayouts/patialsディレクトリに作ります。 ファイル名はkatex.htmlでなくても問題ありません。 このファイルには、KaTeXの公式サイトのAuto-render Extensionを書き込みます。

1
2
3

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.0/dist/katex.min.css" integrity="sha384-t5CR+zwDAROtph0PXGte6ia8heboACF9R5l/DiY+WZ3P2lxNgvJkQk5n7GPvLMYw" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.0/dist/katex.min.js" integrity="sha384-FaFLTlohFghEIZkw6VGwmf9ISTubWAVYW8tG8+w2LAIftJEULZABrF9PPFv+tVkH" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.0/dist/contrib/auto-render.min.js" integrity="sha384-bHBqxz8fokvgoJ/sc17HODNxa42TlaEhB+w8ZJXTc2nZf1VgEaFZeZvT4Mznfz0v" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>

Step2　katex.htmlをサイトのページのheaderまたはfooter要素として読み込む

　KaTeXをサイトのページに適用するためには、headerまたはfooter要素としてkatex.htmlを読み込む必要があります。 layouts/partialsディレクトリにあるheader.htmlとfooter.htmlのどちらで読み込んでも問題ありません。 使用しているテーマによっては、extend_head.htmlやextend_footer.htmlの場合もあります。 私は、extend_head.htmlで読み込んでいます。 layouts/partialsディレクトリに該当するファイルが何もない場合は、themes/{テーマ名}/layouts/partialsディレクトリから該当するファイルをlayouts/partialsディレクトリにコピーします。 該当するファイルには、以下を追加します。

1

{{ if .Params.katex }}{{ partial "katex.html" . }}{{ end }}

これは、Front matterヘッダのパラメータ"katex"がtrueのときkatex.htmlを読み込むということです。 Front matterヘッダとは、$hugo new posts/sample.mdコマンドを実行した際に、sample.mdファイルの上部に書かれているtitleやdate、draftなどの部分のことです。

Step3　KaTeXを使う

　KaTeXを使うには、各記事のFront matterヘッダでkatex: trueにする必要があります。 すべてのページでKaTeXを読み込みたい場合は、configファイルでkatex: trueにします。 数式をインラインでも表示する場合は、Front matterヘッダにmarkup: "mmark"も追加します。 理由はわかりませんが、これを追加しないとインラインで書いたものがブロック表示されてしまいます。 これにはまり、かなり時間を取られました。 上下に空行を入れて、$$\sum_{k=1}^{n}k=\frac{n(n+1)}{2}$$と書くと数式が下のようにブロック表示されます。 数式の上下に空行を入れないとインラインで表示されます。

\[\sum_{k=1}^{n}k=\frac{n(n+1)}{2}\]

インラインの数式：\(\sum_{k=1}^{n}k=\frac{n(n+1)}{2}\)

参考資料

• Render LaTeX with KaTex in Hugo Blog