> ## Documentation Index
> Fetch the complete documentation index at: https://www.mintlify.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# MDX

> 使用 MDX 组件在 JSX 表达式和条件语句中渲染 Markdown，让标题、代码块和表格像页面其余部分一样正常编译，实现条件化内容展示。

使用 `<MDX>` 组件将其子内容渲染为 MDX。标签之间的内容会像页面其余部分一样编译：标题、代码块、表格和其他组件均可正常工作。

该组件在 `{...}` 表达式中最为有用。表达式中的 Markdown 通常会渲染为纯 JSX 文本。将其包裹在 `<MDX>` 中，即可在按条件显示内容的同时保留完整的 Markdown 渲染。

<div id="example">
  ## 示例
</div>

根据导出的变量显示不同的 Markdown 部分：

````mdx Conditional Markdown theme={null}
export const platform = "ios";

{platform === "ios" ? (
  <MDX>
    ## Install on iOS

    Download the SDK, then run:

    ```bash
    pod install
    ```
  </MDX>
) : (
  <MDX>
    ## Install on Android

    Add the SDK to your Gradle dependencies.
  </MDX>
)}
````

页面上只渲染处于活动状态的分支。

你也可以在页面顶层使用 `<MDX>`，将一段 Markdown 内容归组为单个元素：

```mdx Block form theme={null}
<MDX>

  # Hello

  This heading and paragraph compile as Markdown.
</MDX>
```

在块级形式中，请在开始标签后留一个空行，以便内容按块级 Markdown 解析。在表达式中，`<MDX>` 会去除其内容的公共前导缩进，因此你可以将其缩进以匹配周围的代码。

<Note>
  `<MDX>` 内的标题会按文档顺序合并到页面的目录中。这包括从不渲染的分支中的标题，例如条件语句中未激活的一侧。
</Note>

<div id="code-in-fragments">
  ## 片段中的代码
</div>

`<MDX>` 内的代码块和行内代码会像页面根部的代码一样编译。未转义的 `<`、`>`、`{` 和 `}` 均可正常使用：

````mdx Placeholders in fragment code theme={null}
{platform === "linux" && (
  <MDX>
    Clone the repository into `<project-root>`:

    ```bash
    git clone <repository-url> <project-root>
    ```
  </MDX>
)}
````

片段代码中的字符引用会解码为对应字符，与页面其他位置的代码渲染方式一致。`&lt;` 渲染为 `<`。要渲染字面的 `&lt;`，请写 `&amp;lt;`。

<div id="limits">
  ## 限制
</div>

* `<MDX>` 组件最多可嵌套 8 层。
* 一个页面最多可在表达式中展开 500 个 `<MDX>` 片段。

超过任一限制都会导致构建失败。


## Related topics

- [Mintlify MDX 扩展](/docs/zh/cli/mdx-extension.md)
- [由于 MDX 无效导致发布按钮被禁用](/docs/zh/help-center/publish-button-disabled-invalid-mdx.md)
- [将 MDX API 页面迁移到 OpenAPI 导航](/docs/zh/guides/migrating-from-mdx.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.