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
- Convert markdown to an AST (abstract syntax tree)
- Convert AST to html
There're several libraries that does conversion
- markdown-it (This is what
zenn-markdown-htmlis 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.
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.