Hugo で KaTeX

カテゴリ: hugo

MathJax から KaTeX に乗り換えた

当サイトでは数式レンダリングに MathJax を採用してきたが,より軽量で高速な KaTeX に乗り換えた.

KaTeX and MathJax Comparison Demo” をレンダリングするのに要した時間は

  • KaTeX は 109 ms
  • MathJax は 1770 ms

であった.

ライブラリのサイズも zip の段階で

と大幅に異なる.

使い方

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

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

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css" integrity="sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/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) の場合について定義している2

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

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

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

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

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

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

{{ 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{}\) になる.

Enjoy!


  1. @kazutan 氏による「R MarkdownでKatexを使って数式表示」を参考にした.
    https://qiita.com/kazutan/items/c07d317dde68b90ef118

  2. 以下のようにする例も見受けられたが,インラインの数式が動作しなかった.

    <script>
      renderMathInElement(document.body, {delimiters: [
        {left: "$$", right: "$$", display: true},
        {left: "$", right: "$", display: false}
      ]});
    </script>
  3. サブリソース完全性
    https://developer.mozilla.org/ja/docs/Web/Security/Subresource_Integrity

  4. Introduction to Hugo Templating
    https://gohugo.io/templates/introduction/