export const info = {
  author: [
    {github: 'johno', name: 'John Otander', twitter: '4lpine'},
    {github: 'wooorm', name: 'Titus Wormer', twitter: 'wooorm'}
  ],
  modified: new Date('2024-10-18'),
  published: new Date('2020-03-11')
}
export const navSortSelf = 4

# Components

A great thing about MDX is that you can write markdown and specify a component
to be used instead of an HTML element. {/* more */}
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:

```tsx
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<br />
              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
          ![Alt text](/logo.png "title")
          ```
        </td>

        <td>
          ```tsx chrome=no
          <>
            <p><img src="/logo.png" alt="Alt text" title="title" /></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>
  </table>
</div>

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`][gfm] ([see guide][guide-gfm]), 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][components].

[gfm]: https://github.com/remarkjs/remark-gfm

[components]: /docs/using-mdx/#components

[commonmark]: https://spec.commonmark.org/current/

[guide-gfm]: /guides/gfm/