用 Markdoc 而非 Markdown 渲染博客，以在未来支持自定义元素

src/lib/markdoc.ts

@@ -0,0 +1,36 @@
+import Markdoc, { type Config } from '@markdoc/markdoc'
+import { ensureShikiEngine, shikiRender } from './markdown'
+
+const { nodes, Tag } = Markdoc
+
+export const markdocConfig: Config = {
+  nodes: {
+    fence: {
+      render: 'CodeBlock',
+      attributes: {
+        ...nodes.fence.attributes,
+        highlightedHtml: { type: String },
+      },
+      transform(node, config) {
+        const attributes = node.transformAttributes(config)
+
+        const highlightedHtml = shikiRender(
+          node.attributes.content,
+          node.attributes.language,
+        )
+
+        return new Tag(
+          'CodeBlock',
+          { ...attributes, highlightedHtml },
+          node.transformChildren(config),
+        )
+      },
+    },
+  },
+}
+
+export const toMarkdocTree = async (content: string) => {
+  const ast = Markdoc.parse(content)
+  await ensureShikiEngine()
+  return Markdoc.transform(ast, markdocConfig)
+}