组件
MDX 的一个很棒的特性是你可以编写 Markdown 并指定一个组件 来代替 HTML 元素使用。 下表列出了这些可以被覆盖的 HTML 元素、 所需的 Markdown 语法， 以及等效的 JSX。 以第一行 a 为例，你可以通过以下方式用 <FancyLink> 替换该超链接：
TypeScript
import Readme from './readme.md' // 假设使用集成来编译 MDX -> JS。
import {FancyLink} from './components/fancy-link.js'
<Readme components={{a: FancyLink}} />
更多关于如何使用 Markdown 的信息可以在 CommonMark 中找到。
| 名称 | Markdown 语法 | 等效的 JSX |
|---|
a | [MDX](https://mdx.ndjp.net "title")
| <>
<p><a href="https://mdx.ndjp.net" 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 | 
| <>
<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 一起使用。
更多关于组件的信息请参见 § 使用 MDX 中的 ¶ 组件。