Using MDX

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

なぜMDXを使うのか？

MDXは、埋め込みJavaScriptとJSX構文をサポートするMarkdownの特別なバージョンです。これにより、JavaScriptやUIコンポーネントをMarkdownコンテンツ内で混ぜて使用することが可能となり、インタラクティブなチャートやアラートなどが作成できます。

既存のMDX形式で記述されたコンテンツがある場合、Astroへの移行がスムーズになることを期待しています。

例

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

import HeaderLink from '../../components/HeaderLink.astro';
<HeaderLink href="#" onclick="alert('clicked!')">
  MDX内の埋め込みコンポーネント
</HeaderLink>

さらに詳しく

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