hast VS mdast

contentlayer uses remark to parse the markdown in an mdast. We can now use remark plugins to modify the mdast. Then rehype comes into play and converts the mdast into a hast. rehype plugins can now modify the hast. Finally the hast is converted into react components.

remark-rehype translates the mdast structure into a Hypertext Abstract Syntax Tree (hast) structure, also composed of unist nodes.

We have to pass hast elements thought. If you want to read more about hast elements, check out this documentation link.

Is it so hard to accept that a tool or app could compile a html document into some intermediate form and then use that to internally construct a DOM representation, maybe out of a cache?

The actual splitting of the node into those 3 new nodes will depend on the type of AST node (see docs). If you look at other remark plugins, you might find examples or utils for doing that more easily.

contentlayer uses remark to parse the markdown in an mdast. We can now use remark plugins to modify the mdast. Then rehype comes into play and converts the mdast into a hast. rehype plugins can now modify the hast. Finally the hast is converted into react components.

remark parses and process the Markdown text, and converts it into an abstract syntax tree (AST). This tree is composed of unist nodes, which follow the Markdown Abstract Syntax Tree (mdast) structure.

Because we will be inspecting a mdast, which is a markdown abstract syntax tree built upon unist, we can take advantage of the many existing unist utilities to inspect our tree's nodes.