remark-directive VS mdx-bundler

Fortunately, we don't have to write any code as there is remark-directive that does exactly what we need.

The projects this solutions works with are customised Sveltekit projects I made. It has everything: markdown parser using Mdsvex, image converting tool using vite-imagetools, it has toml parser, and of course live preview and lots of other smaller things like markdown directives.

The coolest thing is that MDSveX hooks into remark and rehype, which provides a whole ecosystem of plugins to choose from.

No, not formally, but there are plugins for the various process that implement it based on the spec I linked to, like markdown-it and remark.

Personally using https://github.com/kentcdodds/mdx-bundler

Exact code could be different if you're using mdx-bundler, Contentlayer, or anything else. But there should be a similar API for adding components.

mdx-bundler

Do note that Code Hike also works with Next MDX Remote and MDX Bundler however, we are going to look at a simple example with the official MDX plugin for Next.js.

i'm having a hard time finding a solution, just like others → https://github.com/kentcdodds/mdx-bundler/issues/70

Depends on what functionality you'd like to add as you go. I recently built my site from scratch (with no prior experience) using NextJS, MDX and mdx-bundler [1]. Having the ability to add custom components, or statically generate a related posts matrix are all super useful.

1: https://github.com/kentcdodds/mdx-bundler

https://olickel.com

MDX Bundler differs from all of the other packages listed above in that it is Framework agnostic, meaning you can use it outside of Next.js. Like next-mdx-remote, no changes to the next.config.js file are necessary.

To make Next.js works with MDX, we need to compile and bundle the markdown files. For this task, I decided to go with the new mdx-bundler library made by the famous Kent C. Dodds.