How can I custom renderer tag?

[dribble-njr]

I am trying to implement a blog with chakra-ui and markdown-it.

Now I can parse markdown file to HTML with markdown-it, and I renderer as normal HTML tag like <h1> without any style. But I want to custom style with chakra-ui instead of write CSS code.

How can I costom HTML tag to chakra-ui components. It seems like:

## h2

<Heading as={"h2"}>{...}</Heading>

I am trying to change md.renderer.rules but I doesn't work. So does any other way to impletment it.

Thanks in advance.

[mikelecunio]

hey I am interested in taking this issue on @dribble-njr , I know something about rendering issues in chakra-ui through a friend.

[dribble-njr]

hey I am interested in taking this issue on @dribble-njr , I know something about rendering issues in chakra-ui through a friend.

I solved this problem by ChakraUIRenderer. Actually, it use react-markdown other than markdown-it.

Do you have some idea for rendering custom component with markdown-it?

[mikelecunio]

Hello,

The React documentation on markdoc.io explains how to use the custom Callout and it works really well :)

If I transform it like this:

Markdoc.transform(node, {
tags: {
callout: {
render: "Callout",
},
},
});
and render it like this:

Markdoc.renderers.react(props.content, React, {
components: {
Callout: Callout,
},
});

Is something similar to what you what you actually wanted to render?

[dribble-njr]

So it is also using another lib to render markdown. It seems that markdown-it does not provide similar capabilities?