ネモラムネ

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

#JavaScript #Astro

2024-06-13

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

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

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

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

こんな感じ

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

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

Markdown in Astro
Learn about Astro's built-in support for Markdown.
Markdown in Astro favicon docs.astro.build
Markdown in Astro