La documentación de React en markdoc.io explica cómo usar la Callout personalizada y funciona muy bien :)
Si lo transformo así:
Markdoc.transform(node, { tags: { callout: { render: "Callout", }, }, });y renderízalo así:
Markdoc.renderers.react(props.content, React, { components: { Callout: Callout, }, });Si escribe
{% callout %} Attention, over here! {% /callout %}Funciona.
El problema es que estoy tratando de usar exactamente el mismo concepto pero escribo
# This is a title No puedo hacerlo para renderizar mi componente React personalizado. Simplemente siempre representa una etiqueta HTML h1 .
¿Alguna idea?
Para anular el comportamiento de un nodo de documento integrado, debe definir un esquema de nodo personalizado .
Este es un ejemplo que demuestra cómo hacer que un encabezado se muestre con un componente de React llamado Encabezado:
Markdoc.transform(doc, { nodes: { heading: { render: 'Heading', }, }, });