Customizing Components
Using MDX, you can replace every HTML element that Markdown renders with a custom implementation. This allows you to use a set of design system components when rendering.
The following components can be customized with the MDXProvider:
| Tag | Name | Syntax |
|---|---|---|
p | Paragraph | |
h1 | Heading 1 | # |
h2 | Heading 2 | ## |
h3 | Heading 3 | ### |
h4 | Heading 4 | #### |
h5 | Heading 5 | ##### |
h6 | Heading 6 | ###### |
thematicBreak | Thematic break | *** |
blockquote | Blockquote | > |
ul | List | - |
ol | Ordered list | 1. |
li | List item | |
table | Table | --- \| --- \| --- \| --- |
tr | Table row | This \| is \| a \| table row |
td/th | Table cell | |
pre | Pre | ```js console.log()``` |
code | Code | `console.log()` |
em | Emphasis | _emphasis_ |
strong | Strong | **strong** |
delete | Delete | ~~strikethrough~~ |
code | InlineCode | `console.log()` |
hr | Break | --- |
a | Link | <https://mdxjs.com> or [MDX](https://mdxjs.com) |
img | Image |  |
How does this work?
Components passed to the MDXProvider are used to render the HTML elements that Markdown creates. It uses React’s Context API.
Related
Edit this page on GitHub