ネモラムネ

Astroのmdxにデフォルトでコンポーネントを適用する

#JavaScript #Astro

2024-06-13

mdxではカスタムコンポーネントはimportすることで使えるよ

でもいちいちimportするのはめんどくさいから
デフォルトでカスタムコンポーネントを追加したいよね。

そういうときの機能もちゃんとあったよ、

mdxをContentっていうコンポーネントで表示してると思うんだけど、
そのContentにcomponentsプロパティとして
カスタムコンポーネントのマップ渡してあげればいいみたいだよ。

こんな感じ

<Content components={ a: Link, li: ListItem }/>

一応公式にも書いてあるよ

MarkdownとMDX
AstroでMarkdownやMDXを使ってコンテンツを作成する方法を紹介します。
MarkdownとMDX favicon docs.astro.build
MarkdownとMDX