MDXの使用方法

このテーマには、astro.config.mjs設定ファイルに@astrojs/mdxの統合がインストールされ、設定されています。MDXを使用したくない場合は、設定ファイルから統合を削除することでサポートを無効にできます。

なぜMDXなのか？

MDXは、JavaScriptとJSXの構文を埋め込むことができる特別なMarkdownの形式です。これにより、MarkdownコンテンツにJavaScriptとUIコンポーネントを混在させることができ、インタラクティブなチャートやアラートなどの機能を実装できます。

既存のMDXで作成されたコンテンツがある場合、この統合によりAstroへの移行が簡単になるはずです。

例

以下は、MDX内でUIコンポーネントをインポートして使用する方法です。
ブラウザでこのページを開くと、下のクリック可能なボタンが表示されるはずです。

その他のリンク

• MDX構文ドキュメント
• Astro使用ドキュメント
• 注意: インタラクティブなコンポーネントを作成するには、クライアントディレクティブが必要です。それ以外の場合、MDX内のすべてのコンポーネントはデフォルトで静的HTML（JavaScriptなし）としてレンダリングされます。