md添加hightlight支持。

components/codeMirror.vue

@@ -12,6 +12,7 @@
         </div>
         <miao-collapse :show="show" style="overflow: hidden;">
             <div ref="cmRootRef"></div>
+            <el-skeleton v-if="isLoading === true" :rows="rows" style="display: flex;flex-direction: column;" />
         </miao-collapse>
     </div>
 </template>
@@ -23,29 +24,116 @@ import { EditorState } from "@codemirror/state"
 // import {javascript} from "@codemirror/lang-javascript"
 
 const props = defineProps<{
-    data: string
+    data: string,
+    type?: string,
 }>()
 
 const show = ref(true)
 const cmRootRef = ref<HTMLElement>()
 
-onMounted(() => {
-    if (!cmRootRef.value) {
-        return
+const isLoading = ref(true)
+
+const rows = computed(() => {
+    if (!props.data) {
+        return 5
     }
-    new EditorView({
+    const lines = props.data.split('\n')
+    console.log({
+        L: lines.length,
+    })
+    return lines.length - 2 > 0 ? lines.length - 2 : 1
+})
+
+const useLangExtensions = async () => {
+   const ext = props.type
+   switch (ext) {
+      case 'js':
+      case 'jsx':
+      case 'ts':
+      case 'tsx':
+         const { javascript } = await import('@codemirror/lang-javascript')
+         return [
+            javascript({
+               jsx: ext.substring(2, 3) === 'x',
+               typescript: ext.substring(0, 2) === 'js'
+            })
+         ]
+         break
+      case 'css':
+      case 'scss':
+         const { sass } = await import('@codemirror/lang-sass')
+         return [sass()]
+         break
+      case 'html':
+         const { html } = await import('@codemirror/lang-html')
+         return [html()]
+         break
+      case 'py':
+         const { python } = await import('@codemirror/lang-python')
+         return [python()]
+         break
+      case 'go':
+         const { go } = await import('@codemirror/lang-go')
+         return [go()]
+         break
+      case 'json':
+         const { json } = await import('@codemirror/lang-json')
+         return [json()]
+         break
+      case 'md':
+         const { markdown } = await import('@codemirror/lang-markdown')
+         return [markdown()]
+         break
+      case 'yaml':
+         const { yaml } = await import('@codemirror/lang-yaml')
+         return [yaml()]
+         break
+      case 'vue':
+         const { vue } = await import('@codemirror/lang-vue')
+         return [vue()]
+         break
+      case 'xml':
+         const { xml } = await import('@codemirror/lang-xml')
+         return [xml()]
+         break
+      default:
+         return []
+   }
+}
+
+let cm: EditorView
+
+onMounted(async () => {
+    const langExtensions = await useLangExtensions()
+    cm = new EditorView({
         parent: cmRootRef.value,
         doc: props.data,
         extensions: [
             basicSetup,
             EditorState.readOnly.of(true),
+            ...langExtensions
         ],
     })
+    isLoading.value = false
+})
+
+onUpdated(() => {
+    cm.dispatch({
+        changes: {
+            from: 0,
+            to: cm.state.doc.length,
+            insert: props.data,
+        },
+    })
+})
+
+onBeforeUnmount(() => {
+    cm.destroy()
 })
 
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .cm-rander-wrapper {
     .cm-header {
         display: flex;
@@ -57,12 +145,13 @@ onMounted(() => {
         color: #fff;
         border-radius: 10px 10px 0 0;
         user-select: none;
+
         .cm-header-controls {
             .cm-switch-show-hide {
                 cursor: pointer;
                 color: #fff;
                 fill: #fff;
-           }
+            }
         }
     }
 }

components/markdownRender.vue

@@ -33,15 +33,24 @@ const VNodeArr = computed(() => {
             },
             rander({
                 item,
-                tagName,
+                // tagName,
                 tagAttrs,
-                middlewareMap
+                // middlewareMap
             }) {
+                // console.log({
+                //     tagName,
+                //     tagAttrs,
+                // })
+                const codeType = tagAttrs?.class?.slice(1, -1)?.split('-')?.[1] ?? ''
+                // console.log({
+                //     codeType,
+                // })
                 return h(
                     codeMirror,
                     {
                         // @ts-ignore
-                        data: (item.children[0].children as string).replaceAll('&lt;', '<').replaceAll('&gt;', '>'),
+                        data: item.children[0].children.trim(),
+                        type: codeType,
                     },
                 )
             },

components/miaoCollapse.vue

@@ -67,14 +67,14 @@ const handleShow = () => {
         cwStyle.value = {
             maxHeight: 0,
             opacity: 0,
-            transition: "all 0.2s ease-in-out, opacity 0.3s ease-in",
+            transition: "all .2s ease-in-out, opacity .15s ease-in .07s",
             pointerEvents: 'none',
         }
         timer.push(setTimeout(() => {
             cwStyle.value = {
                 maxHeight: `${originHeight}px`,
                 opacity: 1,
-                transition: "all 0.2s ease-in-out, opacity 0.3s ease-in"
+                transition: "all .2s ease-in-out, opacity .15s ease-in .07s"
             }
             timer.push(setTimeout(() => {
                 cwStyle.value = {