Skip to navigation

组件列表

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

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 中找到。

名称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.

```tsx
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
```tsx
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 中,这些名称是: ablockquotebrcodeemh1h2h3h4h5h6hrimgliolpprestrongul。 对于 remark-gfm (请参阅指南),你还可以使用: delinputsectionsuptabletbodytdththeadtr。 其他添加对新结构的支持并宣传它们与 rehype 配合使用的 remark 插件也将与 MDX 配合使用。

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

MDX 中文网 - 粤ICP备13048890号