feat: 优化markdown渲染

components/markdownRender.vue

@@ -2,12 +2,15 @@
 
 <template>
     <div class="md-render-wrapper markdown-body">
-        <div v-html="renderedData" :key="_key"></div>
+        <!-- <div v-html="renderedData" :key="_key"></div> -->
+        <VNodeArr></VNodeArr>
     </div>
 </template>
 
 <script setup lang="ts">
 import useMarkdownit from '~/hooks/useMarkdownit';
+import Html2VNode from '~/utils/html2VNode';
+import codeMirror from './codeMirror.vue';
 
 const props = defineProps<{
     data: string
@@ -17,17 +20,48 @@ const _key = ref(Math.random())
 
 const markdownIt = await useMarkdownit()
 
-const renderedData = computed(() => {
-    return markdownIt.render(props.data)
+const VNodeArr = computed(() => {
+    if (!props.data) {
+        return () => []
+    }
+    const renderedData = markdownIt.render(props.data)
+    const h2v = new Html2VNode()
+    h2v.use(
+        {
+            filter(tagName) {
+                return tagName === 'code'
+            },
+            rander({
+                item,
+                tagName,
+                tagAttrs,
+                middlewareMap
+            }) {
+                return h(
+                    codeMirror,
+                    {
+                        // @ts-ignore
+                        data: (item.children[0].children as string).replaceAll('&lt;', '<').replaceAll('&gt;', '>'),
+                    },
+                )
+            },
+        }
+    )
+    const res = h2v.rander(renderedData)
+    return {
+        setup: () => {
+            return () => res
+        },
+    }
 })
 
-watch(() => renderedData.value, () => {
-    _key.value = Math.random()
-})
+// watch(() => renderedData.value, () => {
+//     _key.value = Math.random()
+// })
 
 </script>
 
-<style>
+<style lang="scss">
 .md-render-wrapper {
     code {
         box-sizing: border-box;
@@ -39,5 +73,14 @@ watch(() => renderedData.value, () => {
         padding-left: 10px;
         border-radius: 5px;
     }
+
+    hr {
+        display: block;
+        margin: 0;
+        unicode-bidi: isolate;
+        overflow: hidden;
+        border-style: inset;
+        border-width: 0;
+    }
 }
 </style>