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

環境

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

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

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

• Markdown - Nuxt Content

• ルビをつける対象となるテキスト をスロットで指定
• ルビとしてつけるテキスト を 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>

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

Markdown 内で使用する

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