Mixing markdown/html trees

[Fabrizz]

Hi, I'm working on some plugins (remark, for an astro project) to style markdown for a static blog. I'm currently using remark-directive to get nodes that have the directive type.

I'm currently creating a remark plugin to (from a directive) add a dynamic repository cards to a static blog. Currently I just create every element as an object representing the node. Id like to use something like h - hastscript to make the code more readable, but If I understand correctly h just creates html trees, not markdown.

So what could be the best approach? Creating a rehype plugin makes more sense, but is the node type maintained from remark to rehype?

New to the unified/remark/rehype processors any help appreciated! Thanks

[wooorm]

Hi!

correctly h just creates html trees, not markdown.

Correct!

Creating a rehype plugin makes more sense, but is the node type maintained from remark to rehype?

Indeed, that’s the correct question to ask.

Well, one way to find out, make a rehype plugin and console.log the tree 😉

Astro might do some things there. But maybe not. Not by default in our stuff.

If not, there are 2 places to do this. Either a) in the step when going from markdown to HTML which is the last time that directive exists, or b) in the markdown phase.

For a), Astro probably has an option for how to configure remark-rehype: you can pass a custom handler for directives.

For b), you can make a remark plugin, as shown in the remark-directive readme. That works by embedding the HTML AST inside the markdown AST. See https://github.com/remarkjs/remark-directive/tree

[Fabrizz]

Many thanks, just discovered a plugin to convert and pass the directives as directly the tag name.
If someone later finds this useful: https://github.com/IGassmann/remark-directive-rehype