Using MDX/ MDXの使い方について

このページはAstroをセットアップした際に、初めから投稿されている記事を自分なりに訳して整理したものになります。

This theme comes with the @astrojs/mdx integration installed and configured in your astro.config.mjs config file. If you prefer not to use MDX, you can disable support by removing the integration from your config file.

Why MDX? / なぜMDXなのか?

MDXはJavaScriptとJSXを埋め込めるマークダウンの特殊な形式です。 This unlocks the ability to mix JavaScript and UI Components into your Markdown content for things like interactive charts or alerts. これにより、インタラクティブなグラフやアラートなどのために、マークダウン記事にJavaScriptやUIコンポーネントを組み込めることになります。 If you have existing content authored in MDX, this integration will hopefully make migrating to Astro a breeze.

Example

Here is how you import and use a UI component inside of MDX.
When you open this page in the browser, you should see the clickable button below.

Embedded component in MDX