ObsidianとQuartzで青空文庫形式のルビを表示

2025-12-01-01（オブシディアンってヤバくない？）の雑記でも書いた通り、創作を扱っているObsidianや、それを公開する手段としてのQuartzに青空文庫形式のルビを持ち込めるのが大変便利に思ったので、簡単に手順を書き残しておきます。

Obsidianに青空文庫形式のルビを持ち込む方法

コミュニティプラグインから「Japanese Novel Ruby」を検索してインストールする、これが一番便利です。

以下からもインストールできるとのことです。

https://obsidian.md/plugins?id=japanese-novel-ruby

Quartzに青空文庫形式のルビを持ち込む方法

青空文庫形式のルビをHTMLタグでのルビに置換するプラグインを追加します。

手順

1. プラグインファイルを作成

（筆者はこれをLLMに頼んで作成してもらいました）
quartz/plugins/transformers/aozoraRuby.ts:

import { QuartzTransformerPlugin } from "../types"
import { visit } from "unist-util-visit"
 
export const AozoraRuby: QuartzTransformerPlugin = () => ({
  name: "AozoraRuby",
  markdownPlugins() {
    return [
      () => (tree) => {
        visit(tree, "text", (node, index, parent) => {
          if (!parent || index === undefined) return
 
          const text = node.value as string
          const pattern = /｜([^《》]+)《([^》]+)》|([一-龯々]+)《([^》]+)》/g
 
          if (!pattern.test(text)) return
          pattern.lastIndex = 0 // reset after test
 
          const newValue = text.replace(pattern, (_, p1, r1, p2, r2) => {
            const base = p1 || p2
            const ruby = r1 || r2
            return `<ruby>${base}<rp>(</rp><rt>${ruby}</rt><rp>)</rp></ruby>`
          })
 
          node.type = "html"
          node.value = newValue
        })
      },
    ]
  },
})

2. エクスポートに追加

quartz/plugins/transformers/index.ts を開いて、末尾あたりに追加:

ts

export { AozoraRuby } from "./aozoraRuby"

3. quartz.config.ts で読み込み設定

先にルビを変換してから他の処理を走らせるため、順番に注意！

→ルビの変換は最後の方が良いです、注意！（12/3変更）

ts

import { AozoraRuby } from "./quartz/plugins/transformers/ruby"
 
// transformers に追加
transformers: [
  // ...他のプラグイン
  AozoraRuby(),
],