Web Development

React / NextJS



The most popular solution is using remark


MDX is a superset of markdown! (i.e., you can put JSX inside markdown) It's nice to include dynamic contents in a markdown.

Okay, converting markdown involves several steps

  1. Convert markdown to an AST (abstract syntax tree)
  2. Convert AST to html

There're several libraries that does conversion

  • markdown-it (This is what zenn-markdown-html is based on, which is what I use now; This has been defacto-standard)
  • remark (This seems to be a new option; Documentation is much better here)

I found an article that compares these two. In remark, remark does the step 1 and rehype does the step 2

The block container thing (message and warning) was done via markdown-it-container under the hood.

Chrome dev tools