A newer version of this tutorial is available.
This Next.js 14 Tutorial is archived. This does not mean the information it contains is outdated, but it is no longer being updated.
MDX plugins
What I like the most about MDX is its ecosystem of plugins, plugins for MDX are either Remark plugins or Rehype plugins
Difference between remark and rehype
Quote from the remark readme:
Remark is a tool that transforms markdown with plugins. These plugins can inspect and change your markup
Quote from the rehype readme:
Rehype is a tool that transforms HTML with plugins. These plugins can inspect and change the HTML
This means that remark plugins do their work by processing your markdown before it gets transformed into HTML, while rehype plugins will process HTML and do their work. Then the HTML gets transformed into JSX, and then other JSX, like a React component you imported into your MDX page gets added. There is an online tool that let's you experiment with this workflow, it is called MDX playground, you can modify the input and then use the select field to switch between different modes, to see the corresponding output on the right
You will sometimes find a plugin for remark and then another plugin for rehype, but both do the same thing, for example, a plugin that would make a table of contents by listing all headings in your content, if it is a remark plugin it would search for headings like # foo, ## bar, ### baz in your markdown, while a similar rehype plugin would look for headings <h1>foo</h1>, <h2>bar</h2>, <h3>baz</h3> in the HTML (after markdown got converted to HTML). In such a case it is up to you to decide which one you want to use, there is no right or wrong here, just take the one that has the features you need, the one with more detailed documentation, the most stars on GitHub or the one with the least open Issues (it is up to you to define what criteria you want to use to judge which one is better)
If you are interested in learning the difference between remark and rehype, I recommend checking out my MDX post
In the previous chapter we already installed a rehype-mdx-import-media a Rehype plugin to convert all image paths to static imports and in the following parts of the tutorial, we will install and configure several remark plugins and rehype plugins to add some interesting features to our MDX setup