import {Note} from './_component/note.server.js'
export const navSortSelf = 4
export const info = {
  author: [
    {name: 'John Otander', github: 'johno', twitter: '4lpine'},
    {name: 'Titus Wormer', github: 'wooorm', twitter: 'wooorm'}
  ],
  published: new Date('2020-03-11'),
  modified: new Date('2021-11-01')
}

# 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:

```js
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][].

<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>
        ```jsx 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>
        ```jsx 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>
        ```jsx 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.

        ```js
        backtick.fences('for blocks')
        ```
        ````
      </td>

      <td>
        ```jsx 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>
        ```jsx 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>
        ```jsx chrome=no
        <>
          <h1>One number sign…</h1>
        </>
        ```
      </td>
    </tr>

    <tr>
      <th scope="row">`h2`</th>

      <td>
        ```mdx chrome=no
        ## Two number signs…
        ```
      </td>

      <td>
        ```jsx chrome=no
        <>
          <h2>Two number signs…</h2>
        </>
        ```
      </td>
    </tr>

    <tr>
      <th scope="row">`h3`</th>

      <td>
        ```mdx chrome=no
        ### Three number signs…
        ```
      </td>

      <td>
        ```jsx chrome=no
        <>
          <h3>Three number signs…</h3>
        </>
        ```
      </td>
    </tr>

    <tr>
      <th scope="row">`h4`</th>

      <td>
        ```mdx chrome=no
        #### Four number signs…
        ```
      </td>

      <td>
        ```jsx chrome=no
        <>
          <h4>Four number signs…</h4>
        </>
        ```
      </td>
    </tr>

    <tr>
      <th scope="row">`h5`</th>

      <td>
        ```mdx chrome=no
        ##### Five number signs…
        ```
      </td>

      <td>
        ```jsx chrome=no
        <>
          <h5>Five number signs…</h5>
        </>
        ```
      </td>
    </tr>

    <tr>
      <th scope="row">`h6`</th>

      <td>
        ```mdx chrome=no
        ###### Six number signs…
        ```
      </td>

      <td>
        ```jsx 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>
        ```jsx 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>
        ```jsx 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>
        ```jsx 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>
        ```jsx 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>
        ```jsx chrome=no
        <>
          <p>Just some text…</p>
        </>
        ```
      </td>
    </tr>

    <tr>
      <th scope="row">`pre`</th>

      <td>
        ````mdx chrome=no
        ```js
        backtick.fences('for blocks')
        ```
        ````
      </td>

      <td>
        ```jsx 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>
        ```jsx 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>
        ```jsx chrome=no
        <>
          <ul>
            <li>asterisks for unordered</li>
          </ul>
        </>
        ```
      </td>
    </tr>
  </tbody>
</table>

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/
