Search code examples
reactjsmarkdownremarkjsmdxjs

What's the Difference between Remark & Rehype?


I'm a bit confused. I think remark is a markdown processor, rehype is an html processor. So remark takes some markdown, transforms it, and gives me back some markdown. Rehype takes some html, transforms it, and gives me back some html - is this correct?

For example: I came across the packages remark-slug and rehype-slug, and they appear to do basically the same thing—what is the difference between the two?


Solution

  • Not quite right. remark and rehype are Node.js-based processors in the unified collective. They support parsing markdown and HTML respectively to/from syntax trees. All such processors in the unified collective support 'plugins' that enable you to inspect and manipulate the intermediary syntax trees. Powerful stuff.

    remark-slug and rehype-slug are third-party plugins for their respective unified collective processors, remark and rehype. From the slugs' descriptions I gather these plugins are used to turn "headings" into navigable items (Anchors/Bookmarks).

    You decide what to use based on your input and output formats and what, if any, inspection or transformation you want to accomplish. You may use some or all of them.