モチベーション

ブログで数式を使えるようにしたくて Hugo で KaTex を導入したのでそのメモ

Why KaTex?

Hugo は公式に MathJax をサポートしているが KaTex の方がレンダリングが早く様々な SaaS (Wiki、ブログ)が数式のサポートで KaTex を使っているので本ブログでも KaTex を採用することにした。

Hugo で KaTex を使えるようにする

自分の使っているテーマのlayouts/index.htmlを見ると以下のように {{ partial xxxx.html }} で layouts/partials/xxxx.htmlを読み込んでいる。

$ cat themes/xxxxxx/layouts/index.html
{{ partial "head.html" . }}
  <body>
    <div id="blog">
      {{ partial "header.html" . }}
      {{ partial "sidebar.html" . }}
      {{ partial "post/header-cover.html" . }}
      <div id="main" data-behavior="{{ .Scratch.Get "sidebarBehavior" }}"
        class="{{ with .Params.coverimage }}hasCover{{ end }}
               {{ if eq .Params.covermeta "out" }}hasCoverMetaOut{{ else }}hasCoverMetaIn{{ end }}
               {{ with .Params.coverCaption }}hasCoverCaption{{ end }}">
        <section class="postShorten-group main-content-wrap">
          {{ $paginator := .Paginate (where .Site.RegularPages "Type" "post") }}
          {{ range $paginator.Pages }}
            {{ .Render "summary" }}
          {{ end }}
          {{ partial "pagination.html" . }}
        </section>
        {{ partial "footer.html" . }}
      </div>
    </div>
{{ partial "foot.html" . }}

themes/xxxxxx/layouts/partials/foot.htmlを見るとさらにthemes/xxxxxx/layouts/partials以下のHTMLファイルを複数読み込んでいることがわかる。

$ cat themes/hugo-tranquilpeak-theme/layouts/partials/foot.html
    {{ partial "foot_start.html" . }}
    {{ partial "about.html" . }}
    {{ partial "search.html" . }}
    {{ partial "cover.html" . }}
    {{ partial "script.html" . }}
    {{ partial "foot_end.html" . }}
  </body>
</html>

この中のうちいくつかは空のファイルでHUGOがテーマ作成者がテーマ利用者のフックを入れるポイントとして用意している。

$ cat themes/hugo-tranquilpeak-theme/layouts/partials/foot_end.html

従って KaText を導入するには以下のようにlayouts/partials/foot_end.htmlとlayouts/partials/katex.htmlを作ればいい。

$ cat layouts/partials/foot_end.html
{{ if .Params.katex}}{{ partial "katex.html" . }}{{ end }}
$ cat layouts/partials/katex.html
<!-- Loading KaTex scripts extracted from https://katex.org/docs/browser.html -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css"
  integrity="sha384-vKruj+a13U8yHIkAyGgK1J3ArTLzrFGBbBc0tDp4ad/EyewESeXE/Iv67Aj8gKZ0"
  crossorigin="anonymous"
/>
<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script
  defer
  src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.js"
  integrity="sha384-PwRUT/YqbnEjkZO0zZxNqcxACrXe+j766U2amXcgMg5457rve2Y7I6ZJSm2A0mS4"
  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.16.4/dist/contrib/auto-render.min.js"
  integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05"
  crossorigin="anonymous"
  onload="renderMathInElement(document.body);"
></script>

KaTex を使ってみる

以下のようにブログ記事のパラメータを設定する部分でkatex: trueを追加することで KaTex が使えるようになる。

---
title: 'Hugoで数式を書けるようにKaTexを導入する'

[snip]

katex: true

[snip]
---

実際にKaTexがサポートしているSyntaxで数式を以下のように 書くと

$$\int_{a}^{b} x^2 dx$$

以下のように数式が表示されるようになった。

$$\int_{a}^{b} x^2 dx$$

参考

Hugo

KaTex on Hugo

KaTex Official document