组件列表

¥Components

MDX 的一个优点是你可以编写 markdown 并指定要使用的组件而不是 HTML 元素。下表列出了那些可以被覆盖的 HTML 元素、所需的 markdown 以及正常的 JSX 等效项。但是，以 a 的第一行为例，你可以通过执行以下操作将该超链接替换为 <FancyLink>：

¥A great thing about MDX is that you can write markdown and specify a component to be used instead of an HTML element. The following table lists those HTML elements that can be overwritten, the needed markdown, and what the normal JSX equivalent would be. But, taking the first row for a as an example, you can replace that hyperlink with <FancyLink> by doing:

TypeScript

import Readme from './readme.md' // Assumes an integration is used to compile MDX -> JS.
import {FancyLink} from './components/fancy-link.js'

<Readme components={{a: FancyLink}} />

有关如何使用 Markdown 的更多信息可以在 CommonMark 中找到。

¥More information on how to use markdown can be found in CommonMark.

名称	Markdown 语法	等效的 JSX
`a`	`[MDX](https://mdx.nodejs.cn "title")`	`<> <p><a href="https://mdx.nodejs.cn" title="title">MDX</a></p> </>`
`blockquote`	`> A greater than…`	`<> <blockquote> <p>A greater than…</p> </blockquote> </>`
`br`	`A backslash\ before a line break…`	`<> <p> A backslash<br /> before a line break… </p> </>`
`code`	Some `backticks` for inline. ```javascript backtick.fences('for blocks') ```	`<> <p> Some <code>backticks</code> for inline. </p> <pre><code className="language-javascript">backtick.fences('for blocks') </code></pre> </>`
`em`	`Some asterisks for emphasis.`	`<> <p>Some <em>asterisks</em> for emphasis.</p> </>`
`h1`	`# One number sign…`	`<> <h1>One number sign…</h1> </>`
`h2`	`## Two number signs…`	`<> <h2>Two number signs…</h2> </>`
`h3`	`### Three number signs…`	`<> <h3>Three number signs…</h3> </>`
`h4`	`#### Four number signs…`	`<> <h4>Four number signs…</h4> </>`
`h5`	`##### Five number signs…`	`<> <h5>Five number signs…</h5> </>`
`h6`	`###### Six number signs…`	`<> <h6>Six number signs…</h6> </>`
`hr`	`Three asterisks for a thematic break: ***`	`<> <p>Three asterisks for a thematic break:</p> <hr /> </>`
`img`	`![Alt text](/logo.png "title")`	`<> <p><img src="/logo.png" alt="Alt text" title="title" /></p> </>`
`li`	`* asterisks for unordered items 1. decimals and a dot for ordered items`	`<> <ul> <li>asterisks for unordered items</li> </ul> <ol> <li>decimals and a dot for ordered items</li> </ol> </>`
`ol`	`1. decimals and a dot for ordered`	`<> <ol> <li>decimals and a dot for ordered</li> </ol> </>`
`p`	`Just some text…`	`<> <p>Just some text…</p> </>`
`pre`	```javascript backtick.fences('for blocks') ```	`<> <pre><code className="language-javascript">backtick.fences('for blocks') </code></pre> </>`
`strong`	`Two asterisks for strong.`	`<> <p>Two <strong>asterisks</strong> for strong.</p> </>`
`ul`	`* asterisks for unordered`	`<> <ul> <li>asterisks for unordered</li> </ul> </>`

你可以覆盖的组件使用其标准 HTML 名称。通常，在 Markdown 中，这些名称是：a、blockquote、br、code、em、h1、h2、h3、h4、h5、h6、hr、img、li、ol、p、pre、strong 和 ul。对于 remark-gfm (请参阅指南)，你还可以使用：del、input、section、sup、table、tbody、td、th、thead 和 tr。其他添加对新结构的支持并宣传它们与 rehype 配合使用的 remark 插件也将与 MDX 配合使用。

¥The components you can overwrite use their standard HTML names. Normally, in markdown, those names are: a, blockquote, br, code, em, h1, h2, h3, h4, h5, h6, hr, img, li, ol, p, pre, strong, and ul. With remark-gfm (see guide), you can also use: del, input, section, sup, table, tbody, td, th, thead, and tr. Other remark plugins that add support for new constructs and advertise that they work with rehype, will also work with MDX.

有关组件的更多信息，请参见 ¶ 使用 MDX 中的组件。

¥More information on components is available in ¶ Components in § Using MDX.