HugoでTableとかコードとか数式をいい感じに表示しよう

2024年10月14日

このページは静的サイトジェネレーターのHugoを用いて作成しているのですが、このページではHugoの多彩な機能を利用して表やコード・数式を簡単かついい感じに表示できるようにする方法をまとめます。なんでわざわざ記事にするのかというと自分で作ったのにすぐに使い方を忘れるからです。

コード(Code block)

コードブロックはとりあえず表示できれば十分ということで、コードレンダリングフックを使用してタイトル表示だけできるようにしておきました。やる気がなさすぎてインラインでCSSを当てています。

layouts/_default/_markup/render-codeblock.html

{{- $title := .Attributes.title -}}
<p style="margin:0; clear:both;">{{- with $title }}{{ . }}{{ end }}</p>
{{ $result := transform.HighlightCodeBlock . }}
{{ $result.Wrapped }}

初期状態だとスクリーン横幅が狭くなったときに「CSS完全に理解した」現象が発生した（思いっきりはみ出した）のですが、自分ではうまく解決できなかったので以下のページを参考にさせていただき、スクロールを実装。

HugoのSyntaxHighlight (ブログカードも実装しないとな…)

pre{
  overflow-x: scroll;
}

あと、色が微妙なのでスタイル一覧からライトなスタイルを選んで変更。

[markup.highlight]
  style = 'catppuccin-latte'

設定不要でシンタックスハイライトもしてくれるのはめっちゃ便利です。

表(Table)

HugoではMarkdown形式で表を入力すればHTMLのTableに変換してはくれますが、罫線とか背景色とかはデフォルトだと微妙な感じになります。

そこで、Hugo v0.134.0で遂に実装されたTable render hooksを使用して表のHTMLへのパースをフックし、クラスを設定して独自CSSを当てました。といってもやったこととしてはまず以下の通りtableに対してクラスを設定し…

layouts/_default/_markup/render-table.html

<table class="default-table"
  {{- range $k, $v := .Attributes }}
    {{- if $v }}
      {{- printf " %s=%q" $k $v | safeHTMLAttr }}
    {{- end }}
  {{- end }}>
  <thead>
  <!-- 以下省略 -->

あとはCSSのほうで適当にスタイルを当てました。

	列1	列2	列3	列4
行1	内容1	内容2	内容3	内容4
行2	内容5	内容6	内容7	内容8
行3	内容9	内容10	内容11	長い内容の折り返しテスト

数式(Mathematics)

数式も使えたら何かと便利、ということでLaTeX形式での数式表示も試してみることに。基本的にはHugoの公式ドキュメントに従うだけです。

まずはconfigファイルに数式を使うための設定を追加します。ほぼ公式ドキュメントからのコピペですが、数式を使うページはそんなにないのでparamsのmathをfalseがデフォルトに設定しました。これでフロントマターで明示的に指定しない限りは数式関連のモジュールが読み込まれないようになります。

hugo.toml

[markup]
  [markup.goldmark]
    [markup.goldmark.extensions]
      [markup.goldmark.extensions.passthrough]
        enable = true
        [markup.goldmark.extensions.passthrough.delimiters]
          block = [['\[', '\]'], ['$$', '$$']]
          inline = [['\(', '\)']]
[params]
  math = false

次に、数式モジュールを読み込むためのテンプレートを作成します。これも公式ドキュメントからのコピペでOK。

layouts/partials/math.html

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
<script>
  MathJax = {
    tex: {
      displayMath: [['\\[', '\\]'], ['$$', '$$']],  // block
      inlineMath: [['\\(', '\\)']]                  // inline
    }
  };
</script>

最後に、ベーステンプレートのヘッダー部分に以下のコードを追加し、mathパラメタがtrueの時に数式モジュールが読み込まれるようにします。

layouts/_default/baseof.htmlの一部

{{ if .Param "math" }}
  {{ partialCached "math.html" . }}
{{ end }}

これで、フロントマターに

[params]
  math = true

を設定することで数式モジュールが読み込まれます。長い数式は手動で折り返さないとビューポートから思いっきりはみ出しますがそれはご愛敬ということで、どうせ使うのは自分ですし。

\[ \begin{aligned} KL(\hat{y} || y) &= \sum_{c=1}^{M}\hat{y}_c \log{\frac{\hat{y}_c}{y_c}} \\ JS(\hat{y} || y) &= \frac{1}{2}(KL(y||\frac{y+\hat{y}}{2})\\ &+ KL(\hat{y}||\frac{y+\hat{y}}{2})) \end{aligned} \]

これだけでLaTeXの数式をサクッと入れられるのはめっちゃ便利。

あとはやる気が出たら外部リンクのブログカードでも実装したい。

HTMLベタ打ちからHugoへの移行の顛末はこちらの記事をご覧ください。

新環境移行記念と近況報告

HTMLべた打ちからの卒業と、静的サイトジェネレータHugo …

Tags:

Gadget