Skip to content
Go back

Hugoでルビを振る

· Updated:
  • ルビとは文章の脇に小さく書かれる文字のこと
    • 実用的なものからエンタメ的なものまで様々に活用される
  • HTMLにはそれを表示するための<ruby>タグがある
    • <ruby>文章<rt>ぶんしょう</rt></ruby>
  • Markdownに標準的な記法はない
    • ツールやWebサイトには独自の記法があったりする
    • HTMLを直接書ける場合もある
  • ObsidianにはJapanese Novel Rubyというコミュニティプラグインがある
    • 青空文庫・小説家になろう系の記法が使える
      • 縦棒を先頭に置いて文章を書き、続く《》の中にルビテキストを書く
  • Hugoでは.Contentを置換することで無理やり対応できる
    • 文脈を解さないので、エスケープできないし、コードブロック内なども問答無用で置換する

やり方(テーマがPaperModの場合)#

  • layouts/_partials/anchored_headings.htmlを以下の内容で作る
    • 丁度良く.Contentを引数にして呼び出されるので、ちょっとだけ間借りさせてもらう
    • 以下は 【】を二重山括弧に戻してから使ってください
{{ . | replaceRE `|([^【\n]*)【([^】\n]*)】` "<ruby>$1<rt>$2</rt></ruby>" | safeHTML }}
  • anchored_headings.htmlの元々の機能が必要なら、layouts/_markup/render-heading.htmlを以下の内容で作る
<h{{ .Level }} id="{{ .Anchor }}" {{- with .Attributes.class }} class="{{ . }}" {{- end }}>
  {{ .Text }}
  <a hidden class="anchor" aria-hidden="true" href="#{{ .Anchor }}">#</a>
</h{{ .Level }}>

所定の記法で書くと文章にルビが付きますぶんしょうにるびがつきます

参考文献#