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')
}

<Note type="important">
  **Note**: V2 is around the corner.
  This website is for that.
  It hasn’t been released yet.
  But you can try out the RC.
  You can be of great help by reading through these docs and letting us know
  what’s confusing or wrong or other suggestions you have.
  See [§ Support][support] for where to ask questions and
  [§ Contribute][contribute] for how to help.
</Note>

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

[support]: /community/support/

[contribute]: /community/contribute/
