docs/table-of-components.mdx
export const info = { author: [ {github: 'johno', name: 'John Otander'}, {github: 'wooorm', name: 'Titus Wormer'} ], modified: new Date('2025-01-27'), published: new Date('2020-03-11') } export const navSortSelf = 4
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:
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}} />
More information on how to use markdown can be found in CommonMark.
<div className="full-bleed"> <table> <thead> <tr> <th scope="col">Name</th> <th scope="col">Markdown syntax</th> <th scope="col">Equivalent JSX</th> </tr> </thead><tbody>
<tr>
<th scope="row">`a`</th>
<td>
```mdx chrome=no
[MDX](https://mdxjs.com "title")
```
</td>
<td>
```tsx chrome=no
<>
<p><a href="https://mdxjs.com" title="title">MDX</a></p>
</>
```
</td>
</tr>
<tr>
<th scope="row">`blockquote`</th>
<td>
```mdx chrome=no
> A greater than…
```
</td>
<td>
```tsx chrome=no
<>
<blockquote>
<p>A greater than…</p>
</blockquote>
</>
```
</td>
</tr>
<tr>
<th scope="row">`br`</th>
<td>
```mdx chrome=no
A backslash\
before a line break…
```
</td>
<td>
```tsx chrome=no
<>
<p>
A backslash
before a line break…
</p>
</>
```
</td>
</tr>
<tr>
<th scope="row">`code`</th>
<td>
````mdx chrome=no
Some `backticks` for inline.
```javascript
backtick.fences('for blocks')
```
````
</td>
<td>
```tsx chrome=no
<>
<p>
Some <code>backticks</code> for inline.
</p>
<pre><code className="language-javascript">backtick.fences('for blocks')
</code></pre>
</>
```
</td>
</tr>
<tr>
<th scope="row">`em`</th>
<td>
```mdx chrome=no
Some *asterisks* for emphasis.
```
</td>
<td>
```tsx chrome=no
<>
<p>Some <em>asterisks</em> for emphasis.</p>
</>
```
</td>
</tr>
<tr>
<th scope="row">`h1`</th>
<td>
```mdx chrome=no
# One number sign…
```
</td>
<td>
```tsx chrome=no
<>
<h1>One number sign…</h1>
</>
```
</td>
</tr>
<tr>
<th scope="row">`h2`</th>
<td>
```mdx chrome=no
## Two number signs…
```
</td>
<td>
```tsx chrome=no
<>
<h2>Two number signs…</h2>
</>
```
</td>
</tr>
<tr>
<th scope="row">`h3`</th>
<td>
```mdx chrome=no
### Three number signs…
```
</td>
<td>
```tsx chrome=no
<>
<h3>Three number signs…</h3>
</>
```
</td>
</tr>
<tr>
<th scope="row">`h4`</th>
<td>
```mdx chrome=no
#### Four number signs…
```
</td>
<td>
```tsx chrome=no
<>
<h4>Four number signs…</h4>
</>
```
</td>
</tr>
<tr>
<th scope="row">`h5`</th>
<td>
```mdx chrome=no
##### Five number signs…
```
</td>
<td>
```tsx chrome=no
<>
<h5>Five number signs…</h5>
</>
```
</td>
</tr>
<tr>
<th scope="row">`h6`</th>
<td>
```mdx chrome=no
###### Six number signs…
```
</td>
<td>
```tsx chrome=no
<>
<h6>Six number signs…</h6>
</>
```
</td>
</tr>
<tr>
<th scope="row">`hr`</th>
<td>
```mdx chrome=no
Three asterisks for a thematic break:
***
```
</td>
<td>
```tsx chrome=no
<>
<p>Three asterisks for a thematic break:</p>
<hr />
</>
```
</td>
</tr>
<tr>
<th scope="row">`img`</th>
<td>
```mdx chrome=no
```
</td>
<td>
```tsx chrome=no
<>
<p></p>
</>
```
</td>
</tr>
<tr>
<th scope="row">`li`</th>
<td>
```mdx chrome=no
* asterisks for unordered items
1. decimals and a dot for ordered items
```
</td>
<td>
```tsx chrome=no
<>
<ul>
<li>asterisks for unordered items</li>
</ul>
<ol>
<li>decimals and a dot for ordered items</li>
</ol>
</>
```
</td>
</tr>
<tr>
<th scope="row">`ol`</th>
<td>
```mdx chrome=no
1. decimals and a dot for ordered
```
</td>
<td>
```tsx chrome=no
<>
<ol>
<li>decimals and a dot for ordered</li>
</ol>
</>
```
</td>
</tr>
<tr>
<th scope="row">`p`</th>
<td>
```mdx chrome=no
Just some text…
```
</td>
<td>
```tsx chrome=no
<>
<p>Just some text…</p>
</>
```
</td>
</tr>
<tr>
<th scope="row">`pre`</th>
<td>
````mdx chrome=no
```javascript
backtick.fences('for blocks')
```
````
</td>
<td>
```tsx chrome=no
<>
<pre><code className="language-javascript">backtick.fences('for blocks')
</code></pre>
</>
```
</td>
</tr>
<tr>
<th scope="row">`strong`</th>
<td>
```mdx chrome=no
Two **asterisks** for strong.
```
</td>
<td>
```tsx chrome=no
<>
<p>Two <strong>asterisks</strong> for strong.</p>
</>
```
</td>
</tr>
<tr>
<th scope="row">`ul`</th>
<td>
```mdx chrome=no
* asterisks for unordered
```
</td>
<td>
```tsx chrome=no
<>
<ul>
<li>asterisks for unordered</li>
</ul>
</>
```
</td>
</tr>
</tbody>
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.