diff --git a/components/index.mdx b/components/index.mdx index 559877e63..c34490112 100644 --- a/components/index.mdx +++ b/components/index.mdx @@ -80,6 +80,10 @@ Mintlify provides built-in MDX components for your documentation pages. Use thes Conditionally show content based on context. + + Render Markdown inside JSX expressions and conditionals. + + Control content shown to humans versus AI agents. diff --git a/components/mdx.mdx b/components/mdx.mdx new file mode 100644 index 000000000..077810c27 --- /dev/null +++ b/components/mdx.mdx @@ -0,0 +1,62 @@ +--- +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"] +boost: 3 +--- + +Use the `` component to render its children as MDX. Content between the tags compiles like the rest of your page: headings, code fences, tables, and other components all work. + +The component is most useful inside `{...}` expressions. Markdown inside an expression normally renders as plain JSX text. Wrap it in `` to keep full Markdown rendering while conditionally showing content. + +## Example + +Show different Markdown sections based on an exported variable: + +````mdx Conditional Markdown +export const platform = "ios"; + +{platform === "ios" ? ( + + ## Install on iOS + + Download the SDK, then run: + + ```bash + pod install + ``` + +) : ( + + ## Install on Android + + Add the SDK to your Gradle dependencies. + +)} +```` + +Only the active branch renders on the page. + +You can also use `` at the top level of a page to group a Markdown section into a single element: + +```mdx Block form + + + # Hello + + This heading and paragraph compile as Markdown. + +``` + +Leave a blank line after the opening tag in block form so the content parses as block-level Markdown. Inside expressions, `` strips the common leading indentation from its content, so you can indent it to match the surrounding code. + + + Headings inside `` do not appear in the page's table of contents. + + +## Limits + +- You can nest `` components up to 8 levels deep. +- A page can expand up to 500 `` fragments inside expressions. + +Exceeding either limit fails the build. diff --git a/docs.json b/docs.json index b6562bbe7..105f40d2a 100644 --- a/docs.json +++ b/docs.json @@ -93,6 +93,7 @@ "components/frames", "components/github", "components/icons", + "components/mdx", "components/mermaid-diagrams", "components/panel", "components/prompt", diff --git a/es.json b/es.json index 37fb44e73..6ba9d208e 100644 --- a/es.json +++ b/es.json @@ -71,6 +71,7 @@ "es/components/frames", "es/components/github", "es/components/icons", + "es/components/mdx", "es/components/mermaid-diagrams", "es/components/panel", "es/components/prompt", diff --git a/es/components/index.mdx b/es/components/index.mdx index e576d532f..01fe00709 100644 --- a/es/components/index.mdx +++ b/es/components/index.mdx @@ -84,6 +84,10 @@ Mintlify proporciona componentes MDX integrados para tus páginas de documentaci Mostrar contenido de forma condicional según el contexto. + + Renderiza Markdown dentro de expresiones y condicionales JSX. + + Controla el contenido mostrado a humanos frente a agentes de IA. diff --git a/es/components/mdx.mdx b/es/components/mdx.mdx new file mode 100644 index 000000000..0e3058d8a --- /dev/null +++ b/es/components/mdx.mdx @@ -0,0 +1,66 @@ +--- +title: "MDX" +description: "Usa el componente MDX para renderizar Markdown dentro de expresiones y condicionales JSX, de modo que encabezados, bloques de código y tablas se compilen como el resto de tu página." +keywords: ["MDX component", "conditional content", "markdown in JSX", "expressions", "ternary"] +boost: 3 +--- + +Usa el componente `` para renderizar sus elementos hijos como MDX. El contenido entre las etiquetas se compila como el resto de tu página: encabezados, bloques de código, tablas y otros componentes funcionan. + +El componente es más útil dentro de expresiones `{...}`. El Markdown dentro de una expresión normalmente se renderiza como texto JSX sin formato. Envuélvelo en `` para mantener el renderizado completo de Markdown mientras muestras contenido de forma condicional. + +
+ ## Ejemplo +
+ +Muestra diferentes secciones de Markdown según una variable exportada: + +````mdx Conditional Markdown +export const platform = "ios"; + +{platform === "ios" ? ( + + ## Install on iOS + + Download the SDK, then run: + + ```bash + pod install + ``` + +) : ( + + ## Install on Android + + Add the SDK to your Gradle dependencies. + +)} +```` + +Solo la rama activa se renderiza en la página. + +También puedes usar `` en el nivel superior de una página para agrupar una sección de Markdown en un solo elemento: + +```mdx Block form + + + # Hello + + This heading and paragraph compile as Markdown. + +``` + +Deja una línea en blanco después de la etiqueta de apertura en la forma de bloque para que el contenido se analice como Markdown a nivel de bloque. Dentro de expresiones, `` elimina la sangría inicial común de su contenido, por lo que puedes sangrarlo para que coincida con el código circundante. + + + Los encabezados dentro de `` no aparecen en la tabla de contenido de la página. + + +
+ ## Límites +
+ +- Puedes anidar componentes `` hasta 8 niveles de profundidad. +- Una página puede expandir hasta 500 fragmentos `` dentro de expresiones. + +Superar cualquiera de los dos límites hace fallar la compilación. diff --git a/fr.json b/fr.json index efbce353e..71ebb87e4 100644 --- a/fr.json +++ b/fr.json @@ -71,6 +71,7 @@ "fr/components/frames", "fr/components/github", "fr/components/icons", + "fr/components/mdx", "fr/components/mermaid-diagrams", "fr/components/panel", "fr/components/prompt", diff --git a/fr/components/index.mdx b/fr/components/index.mdx index 8ad9204f2..9c2b32de7 100644 --- a/fr/components/index.mdx +++ b/fr/components/index.mdx @@ -84,6 +84,10 @@ Mintlify fournit des composants MDX intégrés pour vos pages de documentation. Afficher le contenu de manière conditionnelle, en fonction du contexte. + + Affichez du Markdown dans des expressions et conditions JSX. + + Contrôlez le contenu affiché aux humains par rapport aux agents IA. diff --git a/fr/components/mdx.mdx b/fr/components/mdx.mdx new file mode 100644 index 000000000..8235aed60 --- /dev/null +++ b/fr/components/mdx.mdx @@ -0,0 +1,66 @@ +--- +title: "MDX" +description: "Utilisez le composant MDX pour afficher du Markdown dans des expressions et conditions JSX, afin que titres, blocs de code et tableaux se compilent comme le reste de votre page." +keywords: ["MDX component", "conditional content", "markdown in JSX", "expressions", "ternary"] +boost: 3 +--- + +Utilisez le composant `` pour afficher ses éléments enfants en tant que MDX. Le contenu entre les balises se compile comme le reste de votre page : les titres, les blocs de code, les tableaux et les autres composants fonctionnent tous. + +Le composant est particulièrement utile dans les expressions `{...}`. Le Markdown à l'intérieur d'une expression s'affiche normalement comme du texte JSX brut. Enveloppez-le dans `` pour conserver le rendu Markdown complet tout en affichant le contenu de manière conditionnelle. + +
+ ## Exemple +
+ +Affichez différentes sections Markdown selon une variable exportée : + +````mdx Conditional Markdown +export const platform = "ios"; + +{platform === "ios" ? ( + + ## Install on iOS + + Download the SDK, then run: + + ```bash + pod install + ``` + +) : ( + + ## Install on Android + + Add the SDK to your Gradle dependencies. + +)} +```` + +Seule la branche active s'affiche sur la page. + +Vous pouvez également utiliser `` au niveau supérieur d'une page pour regrouper une section Markdown en un seul élément : + +```mdx Block form + + + # Hello + + This heading and paragraph compile as Markdown. + +``` + +Laissez une ligne vide après la balise ouvrante dans la forme bloc pour que le contenu soit analysé comme du Markdown au niveau bloc. Dans les expressions, `` supprime l'indentation initiale commune de son contenu, vous pouvez donc l'indenter pour l'aligner sur le code environnant. + + + Les titres à l'intérieur de `` n'apparaissent pas dans la table des matières de la page. + + +
+ ## Limites +
+ +- Vous pouvez imbriquer des composants `` jusqu'à 8 niveaux de profondeur. +- Une page peut développer jusqu'à 500 fragments `` dans des expressions. + +Le dépassement de l'une ou l'autre limite fait échouer la compilation. diff --git a/zh.json b/zh.json index 60bd65fb5..57f35f17c 100644 --- a/zh.json +++ b/zh.json @@ -71,6 +71,7 @@ "zh/components/frames", "zh/components/github", "zh/components/icons", + "zh/components/mdx", "zh/components/mermaid-diagrams", "zh/components/panel", "zh/components/prompt", diff --git a/zh/components/index.mdx b/zh/components/index.mdx index 76b438f3b..26ae2df17 100644 --- a/zh/components/index.mdx +++ b/zh/components/index.mdx @@ -84,6 +84,10 @@ Mintlify 为你的文档页面提供了内置的 MDX 组件。使用这些组件 根据上下文有条件地显示内容。 + + 在 JSX 表达式和条件语句中渲染 Markdown。 + + 控制向人类和 AI 代理显示的内容。 diff --git a/zh/components/mdx.mdx b/zh/components/mdx.mdx new file mode 100644 index 000000000..bcc8a04e6 --- /dev/null +++ b/zh/components/mdx.mdx @@ -0,0 +1,66 @@ +--- +title: "MDX" +description: "使用 MDX 组件在 JSX 表达式和条件语句中渲染 Markdown,让标题、代码块和表格像页面其余部分一样正常编译,实现条件化内容展示。" +keywords: ["MDX component", "conditional content", "markdown in JSX", "expressions", "ternary"] +boost: 3 +--- + +使用 `` 组件将其子内容渲染为 MDX。标签之间的内容会像页面其余部分一样编译:标题、代码块、表格和其他组件均可正常工作。 + +该组件在 `{...}` 表达式中最为有用。表达式中的 Markdown 通常会渲染为纯 JSX 文本。将其包裹在 `` 中,即可在按条件显示内容的同时保留完整的 Markdown 渲染。 + +
+ ## 示例 +
+ +根据导出的变量显示不同的 Markdown 部分: + +````mdx Conditional Markdown +export const platform = "ios"; + +{platform === "ios" ? ( + + ## Install on iOS + + Download the SDK, then run: + + ```bash + pod install + ``` + +) : ( + + ## Install on Android + + Add the SDK to your Gradle dependencies. + +)} +```` + +页面上只渲染处于活动状态的分支。 + +你也可以在页面顶层使用 ``,将一段 Markdown 内容归组为单个元素: + +```mdx Block form + + + # Hello + + This heading and paragraph compile as Markdown. + +``` + +在块级形式中,请在开始标签后留一个空行,以便内容按块级 Markdown 解析。在表达式中,`` 会去除其内容的公共前导缩进,因此你可以将其缩进以匹配周围的代码。 + + + `` 内的标题不会出现在页面的目录中。 + + +
+ ## 限制 +
+ +- `` 组件最多可嵌套 8 层。 +- 一个页面最多可在表达式中展开 500 个 `` 片段。 + +超过任一限制都会导致构建失败。