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

src/components/MarkdocRenderer.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from 'react'
+import Markdoc, { type RenderableTreeNode } from '@markdoc/markdoc'
+import { toMarkdocTree } from '../lib/markdoc'
+import { CodeBlock } from './markdoc/CodeBlock.tsx'
+
+export const MarkdocContent: React.FC<{
+  content: string
+}> = ({ content }) => {
+  /* 注意一下这个元件是动态的 */
+  const [tree, setTree] = useState<any>(null)
+
+  useEffect(() => {
+    let active = true
+    toMarkdocTree(content).then((result) => {
+      if (active) setTree(result)
+    })
+    return () => {
+      active = false
+    }
+  }, [content])
+
+  if (!tree) return <div className="loading">渲染中... (๑•̀ㅂ•́)و✧</div>
+
+  return <MarkdocTreeRender tree={tree} />
+}
+
+export const MarkdocTreeRender: React.FC<{
+  tree: RenderableTreeNode
+}> = ({ tree }) => {
+  return (
+    <div className="markdoc-container">
+      {Markdoc.renderers.react(tree, React, { components: { CodeBlock } })}
+    </div>
+  )
+}

src/components/markdoc/CodeBlock.tsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export const CodeBlock: React.FC<{ highlightedHtml: string }> = (props) => {
+  return <div dangerouslySetInnerHTML={{ __html: props.highlightedHtml }}></div>
+}