如何使用 markdoc.io 为默认 Markdown 元素定义自定义渲染器？

Question

React documentation on markdoc.io 解释了如何使用自定义 Callout 并且效果非常好:)

如果我这样转换它：

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

并像这样渲染它：

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

如果写

{% callout %}
Attention, over here!
{% /callout %}

有效。

问题是，我试图使用完全相同的概念，但是写

# This is a title

我无法渲染我的自定义 React 组件。它总是呈现 h1 HTML 标签。

有什么想法吗？

Answer 1

要覆盖 built-in 文档节点的行为，您需要 define a custom node schema。

这是一个演示如何使用名为 Heading 的 React 组件制作标题渲染的示例：

 Markdoc.transform(doc, {
  nodes: {
    heading: {
      render: 'Heading',
    },
  },
});

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