mdast VS remark-rehype

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.

I usually combine remark-parse, remark-rehype and rehype-react to transform markdown into react components. The configuration of the processor is like:

remark-rehype: remark plugin that turns markdown into HTML to support rehype.

The trouble is when i use use remark-rehype each item from the frontmatter gets converted to either a

Astro supports Markdown input files out of the box as well as remark and rehype plugins.