Nuxt Content で Markdown の文章にルビをつける

Nuxt Content モジュールを使用しているウェブサイトで、文章中にルビをつけられるようにしたときの対応を、備忘録的に残しておこうと思います。 こういうやつ(ルビ) 。

環境

今回作業した環境は以下のとおりです。

• Node.js - 18.18.0
• Nuxt - 3.7.4
• Nuxt Content - 2.8.2

Nuxt Content では、Markdown ファイル内で components/content/ にある Vue.js のコンポーネントを使用することができます。この機能を使用して、Markdown 形式で書いた文章中にルビをつけられるようにします。

web/
　├ content/
　│　└ index.md
　├ components/
　│　└ content/
　│　　　└ ContentRuby.vue <- ルビをつけるやつ
　├ app.vue
　├ nuxt.config.ts
　├ package.json
　├ pnpm-lock.yaml
　└ tsconfig.json

コンポーネントを作成する

先述のとおり、components/content/ にある Vue.js のコンポーネントは Markdown ファイル内で使用することが可能です。

• Markdown - Nuxt Content

components/content/ContentRuby.vue を作成し、ルビをつけるコンポーネントを実装します。この記事では、以下の仕様で実装を行います。

• ルビをつける対象となるテキスト をスロットで指定
• ルビとしてつけるテキスト を ruby Prop で指定

実装したものが以下のとおりです。

<script lang="ts" setup>
type ContentRubyProps = {
  /** ルビの文字列を指定します */
  ruby: string
}

const props = withDefaults(defineProps<ContentRubyProps>(), {
  ruby: '',
})
</script>

<template>
  <ruby>
    <slot />
    <rp>(</rp>
    <rt>{{ props.ruby }}</rt>
    <rp>)</rp>
  </ruby>
</template>

マークアップは MDN の <ruby> タグの例を参考にしています。

• <ruby>: ルビ注釈要素 - HTML: ハイパーテキストマークアップ言語 | MDN

Markdown 内で使用する

作成したコンポーネントを使用します。content/ ディレクトリに Markdown ファイルを作成し、文章を記述します。

Nuxt Content モジュールを使用しているウェブサイトで、  
文章中にルビをつけられるようにしたときの対応を、  
備忘録的に残しておこうと思います。  
:content-ruby{ruby="ルビ"}[こういうやつ] 。

Nuxt Content では、 : のあとにコンポーネント名を記述することで、Vue.js のコンポーネントを使用することができます。また、{} の中に Props を、[] にスロットの内容を記述することができます。

ブラウザで表示を見ると、ルビがついていることが確認できます。 こういうやつ(ルビ) 。