feat: pass components to render

Author: litingyes

.vscode/settings.json

@@ -6,9 +6,11 @@
     "changelogithub",
     "commitlint",
     "mdast",
+    "micromark",
     "preid",
     "shiki",
-    "unplugin"
+    "unplugin",
+    "vnode"
   ],
   // Disable the default formatter, use eslint instead
   "prettier.enable": false,

README.md

@@ -43,6 +43,18 @@ Markdown string to render.
 type md = string
 ```
 
+#### components
+
+Customize how nodes are rendered.
+
+```ts
+type ComponentReturn = Component | [Component, Record<string, any> | undefined]
+
+// default: undefined
+type components = Partial<Record<Nodes['type'], ComponentReturn |
+  ((node: Node) => ComponentReturn)>>
+```
+
 #### shiki
 
 options of shiki for render code block.

src/VueMarkdown.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { ToVNodeOptions } from 'mdast-util-to-vnode'
 import type { HighlighterCore, LanguageRegistration, ThemeRegistration } from 'shiki'
 import { fromMarkdown } from 'mdast-util-from-markdown'
 import { gfmFromMarkdown } from 'mdast-util-gfm'
@@ -43,6 +44,7 @@ const props = withDefaults(defineProps<VueMarkdownProps>(), {
 })
 interface VueMarkdownProps {
   md: string
+  components?: ToVNodeOptions['components']
   shiki?: {
     themes?: Record<string, ThemeRegistration>
     langs?: LanguageRegistration[][]
@@ -57,6 +59,7 @@ const vNode = computed(() => {
   return toVNode(ast, {
     components: {
       code: CodeBlock,
+      ...props.components,
     },
   })
 })