MarkDoc

npm add @markdoc/markdoc

import Markdoc from '@markdoc/markdoc';

const source = `
---
title: Doc title
---

# {% $markdoc.frontmatter.title %} {% #overview %}

{% callout type="check" %}
  More content
{% /callout %}
`;

const ast = Markdoc.parse(source);
const content = Markdoc.transform(ast, {
  nodes: {
    heading: {
      render: 'Heading',
      attributes: {
        id: { type: String },
        level: { type: Number },
      },
    },
  },
  tags: {
    callout: {
      render: 'Callout',
      attributes: {
        title: {
          type: String,
          description: 'The title displayed at the top of the callout',
        },
      },
    },
  },
  variables: {
    author: {
      name: 'Wener',
    },
  },
  functions: {
    includes: {
      transform(parameters, config) {
        const [array, value] = Object.values(parameters);

        return Array.isArray(array) ? array.includes(value) : false;
      },
    },
  },
  partials: {
    'header.md': Markdoc.parse(`# My header`),
  },
});

// toHTML
const html = Markdoc.renderers.html(content);
// React
const children = Markdoc.renderers.react(content, React, { components });

<!-- Tag+属性 -->
{% callout type="check" %}
  More content
{% /callout %}

{% image src="" /%}

<!-- Annotation -->
# Header {% #custom-id %}
# Heading {% .custom-class-name-here %}

<!-- 变量 -->
{% $variable %}
{% $markdoc.frontmatter.title %}

<!-- 函数 -->
# {% titleCase($markdoc.frontmatter.title) %}

{% if equals(1, 2) %}
Show the password
{% /if %}

{% tag title=uppercase($key) /%}