Hugoでルビを振るShortCodeを作る

はじめに

Hugoの記事内でルビ（ふりがな）を振りたい場合、毎回HTMLの<ruby>タグを直書きするのは手間がかかる。
そこで、HugoのShortcode機能を使って、簡単にルビを振れるようにしてみる。

Hugo v0.122.0

まずは引数の順番で指定するシンプルな形で作ってみる。

layouts/shortcodes/ruby.html というファイルを作成し、以下の内容を記述する。

<ruby>
  {{ .Get 0 }}
  <rt>{{ .Get 1 }}</rt>
</ruby>

記事のMarkdownファイル内で以下のように記述する。

{{ < ruby "漢字" "かんじ" > }}

以下のようなHTMLが出力される。

<ruby>
  漢字
  <rt>かんじ</rt>
</ruby>

可読性を上げるために、名前付き引数を使えるようにする。また、古いブラウザ向けに<rp>タグも含めるように改良する。

<ruby>
  {{- .Get "base" -}}
  <rp>(</rp><rt>{{- .Get "ruby" -}}</rt><rp>)</rp>
</ruby>

※ Markdown内で改行が入らないように、{{- と -}} を使って余分な空白を除去している。

{{ < ruby base="漢字" ruby="かんじ" > }}

漢字(かんじ)

文章の途中で使うとこのようになる。

これは{{ < ruby base="東京" ruby="とうきょう" > }}に行った話です。

これは東京(とうきょう) に行った話です。

テーマによってはルビの文字サイズが大きすぎることがあるため、必要に応じてCSSで調整する。 Stackテーマなどを使用している場合は、assets/scss/custom.scss などに以下を追記すると良い。

ruby rt {
  font-size: 0.6em;
}

これで記事作成時に手軽にルビを振ることができるようになった。難読漢字や、専門用語の読み仮名、あるいは当て字（「本気」と書いて「マジ」と読むなど）などにも使用することができるので、これは積極的に使っていこう。
この記事を書いたということは、今後当て字を多用する予定があるのかもしれない……？