feat: 优化markdown渲染

components/codeMirror.vue

@@ -0,0 +1,69 @@
+<template>
+    <div class="cm-rander-wrapper">
+        <div class="cm-header">
+            <div class="cm-header-title">
+                <span>CodeMirror</span>
+            </div>
+            <div class="cm-header-controls">
+                <div class="cm-switch-show-hide" @click="show = !show">
+                    {{ show ? '收起' : '展开' }}
+                </div>
+            </div>
+        </div>
+        <miao-collapse :show="show" style="overflow: hidden;">
+            <div ref="cmRootRef"></div>
+        </miao-collapse>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { EditorView, basicSetup } from "codemirror"
+import { EditorState } from "@codemirror/state"
+// import chevronDown from "./icons/chevronDown.vue";
+// import {javascript} from "@codemirror/lang-javascript"
+
+const props = defineProps<{
+    data: string
+}>()
+
+const show = ref(true)
+const cmRootRef = ref<HTMLElement>()
+
+onMounted(() => {
+    if (!cmRootRef.value) {
+        return
+    }
+    new EditorView({
+        parent: cmRootRef.value,
+        doc: props.data,
+        extensions: [
+            basicSetup,
+            EditorState.readOnly.of(true),
+        ],
+    })
+})
+
+</script>
+
+<style lang="scss" scoped>
+.cm-rander-wrapper {
+    .cm-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 10px;
+        height: 25px;
+        background-color: #000;
+        color: #fff;
+        border-radius: 10px 10px 0 0;
+        user-select: none;
+        .cm-header-controls {
+            .cm-switch-show-hide {
+                cursor: pointer;
+                color: #fff;
+                fill: #fff;
+           }
+        }
+    }
+}
+</style>

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>