@docus/mdc-edge

The Markdown Components parser for Docus.

Usage no npm install needed!

<script type="module">
  import docusMdcEdge from 'https://cdn.skypack.dev/@docus/mdc-edge';
</script>

README

MDC

Install

# Using Yarn
yarn add --dev @docus/mdc
# Using NPM
npm install --save-dev @docus/mdc

Use

import mdc from '@docus/mdc'

const markdown = `---
frontmatter: data
---

## section title

::custom-component
Default Slot
::
`

await mdc.parse(markdown)

The result will be

{
  "body": {
    "raw": "---\nfrontmatter: data\n---\n\n## section title\n\n::custom-component\nDefault Slot\n::\n",
    "ast": {
      "type": "root",
      "children": [
        {
          "type": "element",
          "tag": "h2",
          "props": {
            "id": "section-title"
          },
          "children": [
            {
              "type": "element",
              "tag": "a",
              "props": {
                "href": "#section-title"
              },
              "children": [
                {
                  "type": "text",
                  "value": "section title"
                }
              ]
            }
          ]
        },
        {
          "type": "text",
          "value": "\n"
        },
        {
          "type": "element",
          "tag": "custom-component",
          "props": {},
          "children": [
            {
              "type": "element",
              "tag": "p",
              "props": {},
              "children": [
                {
                  "type": "text",
                  "value": "Default Slot"
                }
              ]
            }
          ]
        }
      ]
    },
    "toc": {
      "title": "",
      "searchDepth": 2,
      "depth": 2,
      "links": [
        {
          "id": "section-title",
          "depth": 2,
          "text": "section title"
        }
      ]
    }
  },
  "meta": {
    "frontmatter": "data",
    "empty": false,
    "title": "",
    "description": ""
  }
}