33 lines
1.6 KiB
Plaintext
33 lines
1.6 KiB
Plaintext
---
|
|
layout: '../../layouts/BlogPost.astro'
|
|
title: 'Using MDX'
|
|
description: 'Lorem ipsum dolor sit amet'
|
|
pubDate: 'Jul 02 2022'
|
|
heroImage: '/placeholder-hero.jpg'
|
|
---
|
|
|
|
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/markdown-content/#mdx-features) 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.
|
|
|
|
import HeaderLink from '../../components/HeaderLink.astro';
|
|
|
|
<HeaderLink href="#" onclick="alert('clicked!')">
|
|
Embedded component in MDX
|
|
</HeaderLink>
|
|
|
|
## More Links
|
|
|
|
- [MDX Syntax Documentation](https://mdxjs.com/docs/what-is-mdx)
|
|
- [Astro Usage Documentation](https://docs.astro.build/en/guides/markdown-content/#markdown-and-mdx-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.
|