MDX 赋予你在 markdown 内容当中使用 JSX 的能力。 你可以导入组件,例如交互式图标或警告框,并将它们嵌入到书写的markdown内容当中。
使用例子
以下是在 MDX 中导入和使用 UI 组件的方法。
import AButton from '@/components/astro/AButton.astro'
import VButton from '@/components/vue/VButton.vue'
import RButton from '@/components/react/RButton.jsx'
export const count = 10;
<AButton>Astro:</AButton>
<VButton client:only="vue" count={count}>Vue:</VButton>
<RButton client:only="react" count={count}>React:</RButton>
其他
- 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.