mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
8774f9e211
* docs: document code behavior inside MDX fragments * docs: shorten es and fr MDX page descriptions to SEO length --------- Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com>
78 lines
2.2 KiB
Plaintext
78 lines
2.2 KiB
Plaintext
---
|
|
title: "MDX"
|
|
description: "Use the MDX component to render Markdown inside JSX expressions and conditionals so headings, code blocks, and tables compile like the rest of your page."
|
|
keywords: ["MDX component", "conditional content", "markdown in JSX", "expressions", "ternary"]
|
|
---
|
|
|
|
Use the `<MDX>` component to render content between the tags as MDX that compiles like the rest of your page. This is useful when you want to put headings, code fences, tables, and other components inside of a JSX component.
|
|
|
|
## Example
|
|
|
|
Show different Markdown sections based on an exported variable:
|
|
|
|
````mdx Conditional Markdown
|
|
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>
|
|
)}
|
|
````
|
|
|
|
Only the active branch renders on the page.
|
|
|
|
You can also use `<MDX>` at the top level of a page to group a Markdown section into a single element:
|
|
|
|
```mdx Block form
|
|
<MDX>
|
|
|
|
# Hello
|
|
|
|
This heading and paragraph compile as Markdown.
|
|
</MDX>
|
|
```
|
|
|
|
Leave a blank line after the opening tag in block form so the content parses as block-level Markdown. Inside expressions, `<MDX>` strips the common leading indentation from its content, so you can indent it to match the surrounding code.
|
|
|
|
<Note>
|
|
Headings inside `<MDX>` appear in the page's table of contents. This includes headings in branches that never render, such as the inactive side of a conditional.
|
|
</Note>
|
|
|
|
## Code in fragments
|
|
|
|
Code fences and inline code inside `<MDX>` compile like code at the page root. Raw `<`, `>`, `{`, and `}` work without escaping:
|
|
|
|
````mdx Placeholders in fragment code
|
|
{platform === "linux" && (
|
|
<MDX>
|
|
Clone the repository into `<project-root>`:
|
|
|
|
```bash
|
|
git clone <repository-url> <project-root>
|
|
```
|
|
</MDX>
|
|
)}
|
|
````
|
|
|
|
Character references in fragment code decode to their characters, matching how code renders elsewhere on the page. `<` renders as `<`. To render a literal `<`, write `&lt;`.
|
|
|
|
## Limits
|
|
|
|
- You can nest `<MDX>` components up to 8 levels deep.
|
|
- A page can expand up to 500 `<MDX>` fragments inside expressions.
|
|
|
|
Exceeding either limit fails the build.
|