How do I define custom renderers for default Markdown elements using markdoc.io?

Question

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?

Answer 1

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',
    },
  },
});