Using MDX 使用 MDX

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 is a special flavor of Markdown that supports embedded JavaScript & JSX syntax. This unlocks the ability to mix JavaScript and UI Components into your Markdown content for things like interactive charts or alerts.

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.

這個主題已在 astro.config.mjs 中安裝並設定好 @astrojs/mdx 整合。如果您不需要使用 MDX，可以從設定檔中移除此整合。

為什麼使用 MDX？

MDX 是 Markdown 的進階版本，支援嵌入 JavaScript 與 JSX 語法。這讓您能夠在 Markdown 內容中混合使用 JavaScript 和 UI 元件，例如互動式圖表或提示框。

如果您已有以 MDX 格式撰寫的內容，此整合可讓您輕鬆遷移至 Astro。

範例

以下示範如何在 MDX 中匯入並使用 UI 元件。
在瀏覽器中開啟此頁面後，您應該會看到下方可點擊的按鈕。

More Links

• MDX Syntax Documentation
• Astro Usage Documentation
• Note: Client Directives are still required to create interactive components. Otherwise, all components in your MDX will render as static HTML (no JavaScript) by default.

更多資源

• MDX 語法文件
• Astro 使用文件
• 注意： 若要建立互動式元件，仍需使用 Client Directives。否則，MDX 中的所有元件預設會渲染為靜態 HTML（不含 JavaScript）。