跳转到主要内容
使用 <MDX> 组件将其子内容渲染为 MDX。标签之间的内容会像页面其余部分一样编译:标题、代码块、表格和其他组件均可正常工作。 该组件在 {...} 表达式中最为有用。表达式中的 Markdown 通常会渲染为纯 JSX 文本。将其包裹在 <MDX> 中,即可在按条件显示内容的同时保留完整的 Markdown 渲染。

示例

根据导出的变量显示不同的 Markdown 部分:
Conditional Markdown
页面上只渲染处于活动状态的分支。 你也可以在页面顶层使用 <MDX>,将一段 Markdown 内容归组为单个元素:
Block form
在块级形式中,请在开始标签后留一个空行,以便内容按块级 Markdown 解析。在表达式中,<MDX> 会去除其内容的公共前导缩进,因此你可以将其缩进以匹配周围的代码。
<MDX> 内的标题会按文档顺序合并到页面的目录中。这包括从不渲染的分支中的标题,例如条件语句中未激活的一侧。

片段中的代码

<MDX> 内的代码块和行内代码会像页面根部的代码一样编译。未转义的 <、>、{ 和 } 均可正常使用:
Placeholders in fragment code
片段代码中的字符引用会解码为对应字符,与页面其他位置的代码渲染方式一致。&lt; 渲染为 <。要渲染字面的 &lt;,请写 &amp;lt;。

限制

  • <MDX> 组件最多可嵌套 8 层。
  • 一个页面最多可在表达式中展开 500 个 <MDX> 片段。
超过任一限制都会导致构建失败。