---
title: "Using MDX | Go Bali Go"
description: "Lorem ipsum dolor sit amet"
url: "https://gobaligo.id/blog/using-mdx/"
lang: "zh-TW"
published: "2024-06-01T00:00:00.000Z"
modified: "2024-06-01T00:00:00.000Z"
source: gobaligo.id
---

# Using MDX

小 [作者：Gobaligo編輯部](https://gobaligo.id/about/) Go Bali Go 內容團隊・峇里島旅遊攻略

2024年6月1日

---

![Using MDX](https://gobaligo.id/assets/blog-placeholder-5.jpg)

💡 快速解答

Lorem ipsum dolor sit amet

This theme comes with the [@astrojs/mdx](https://docs.astro.build/en/guides/integrations-guide/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](https://docs.astro.build/en/guides/integrations-guide/mdx/#mdx-in-astro) 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.

Embedded component in MDX

## More Links

- [MDX Syntax Documentation](https://mdxjs.com/docs/what-is-mdx)

- [Astro Usage Documentation](https://docs.astro.build/en/basics/astro-pages/#markdownmdx-pages)

- **Note:** [Client Directives](https://docs.astro.build/en/reference/directives-reference/#client-directives) are still required to create interactive components. Otherwise, all components in your MDX will render as static HTML (no JavaScript) by default.