Components

1-2 minutes read
By John Otander, Titus Wormer

Components

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}} />

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

Name	Markdown syntax	Equivalent 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.