Astro(Starlight)でテキストにハイライトする

結論

Astro（Starlight）でテキストにハイライトを入れるには、拡張子を .mdx にした上で、HTMLの <mark> タグでハイライトしたい箇所を囲めばよい。

Astroを使って静的なWebページを作成している際、Markdown文書内で特定のテキストにマーカーを引いたようなハイライト表示をしたい場合がある。標準のMarkdown記法（==テキスト== など）がうまく機能しないケースも多いため、確実な方法を以下に記す。

テキストにハイライトする方法

ハイライト表示を適用するには、対象のファイル拡張子が .mdx であることを確認し、該当テキストを直接 HTMLの <mark> タグで囲む。

コードの記述例:

xxx.mdx

abc <mark>def</mark>

実際の表示結果: abc def

ファイルの拡張子に注意

この手法は Astro の MDX サポート機能を利用しているため、通常の .md ファイルでは HTML タグが正しくレンダリングされない可能性がある。必ずファイルを .mdx にリネームして使用すること。

まとめ

• Astro（Starlight）におけるテキストハイライトには、HTMLの <mark> タグを使用するのが最も確実である。
• 正常に表示させるため、ファイルの拡張子は .mdx に設定する必要がある。