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,
},
});
If write
{% callout %}
Attention, over here!
{% /callout %}
It works.
The problem is that, I'm trying to use the exact same concept but write
# This is a title
I cannot make it to render my custom React component. It just always renders an h1 HTML tag.
Any idea?
To override the behavior of a built-in document node, you need to define a custom node schema.
This is an example that demonstrates how to make a heading render with a React component called Heading:
Markdoc.transform(doc, {
nodes: {
heading: {
render: 'Heading',
},
},
});