Skip to navigation
1 minute read
By John Otander, Titus Wormer

组件

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。

NameMarkdown syntaxEquivalent JSX
a
[MDX](https://mdxjs.com "title")

<>
  <p><a href="https://mdxjs.com" 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>
</>

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.

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