🎈 perf: 优化部分样式的展示

klp-ui/src/components/MarkdownPreview.vue

@@ -13,6 +13,12 @@ export default {
       default: ''
     }
   },
+  data() {
+    return {
+      vditor: null,
+      loading: false
+    }
+  },
   mounted() {
     this.renderMarkdown();
   },
@@ -22,13 +28,17 @@ export default {
     }
   },
   methods: {
-    renderMarkdown() {
-      Vditor.preview(this.$refs.preview, this.value || '', {
+    async renderMarkdown() {
+      this.loading = true;
+      await Vditor.preview(this.$refs.preview, this.value || '', {
         anchor: 1,
         hl: true,
+        theme: 'dark',
         math: { inlineDigit: true },
         mermaid: true,
       });
+      this.loading = false;
+      console.log(this.$refs.preview, p);
     }
   }
 }
@@ -36,9 +46,9 @@ export default {
 
 <style scoped>
 .markdown-preview {
-  border: 1px solid #e4e7ed;
   border-radius: 4px;
   padding: 8px;
-  background: #fff;
+  background: #393d46;
+  color: white;
 }
 </style>