完成PostEdit的图片显示，但是代码高亮显示还是有问题

Front/vue-unilife/src/components/MarkdownRender.vue

@@ -38,7 +38,7 @@ async function renderMarkdown() {
 watch(() => props.content, renderMarkdown, { immediate: true })
 </script>
 
-<style scoped>
+<style>
 .markdown-body {
   font-size: 16px;
   line-height: 1.8;

Front/vue-unilife/src/routers/routers.ts

@@ -58,6 +58,14 @@ const routes:Array<RouteRecordRaw> = [
         name:'PostDetail',
         component: () => import('@/views/PostDetailPage.vue'),
     },
+    {
+        path: '/postEdit',
+        name: 'PostEdit',
+        component: () => import('@/views/PostEditView.vue'),
+        meta:{
+            hideHeader: true,
+        }
+    }
 ];
 
 const router = createRouter({

Front/vue-unilife/src/views/PostEditView.vue

@@ -3,7 +3,9 @@
   <div class="post-editor">
     <!-- 顶部工具栏 -->
     <div class="toolbar">
+      <router-link to = '/personal'>
       <el-button :icon="ArrowLeft" circle></el-button>
+      </router-link>
       <el-select v-model="selectedCategory" placeholder="选择分区" class="category-select" size="large">
         <el-option
           v-for="item in categories"
@@ -40,7 +42,6 @@
             <el-icon size = 30px v-else><Plus/></el-icon>
         </el-upload>
           <template #footer>
-            <button class = "btn btn-primary" @click="uploadPictureDialog = false,previewUrl = ''">取消</button>
             <button class = "btn btn-primary" @click="uploadPictureDialog = false ,previewUrl = ''">确定</button>
           </template>
       </el-dialog>
@@ -70,10 +71,7 @@
       <!-- 右侧Markdown预览框 -->
       <div class="preview-pane card">
         <div class="editor-title">{{ title || '请输入文章标题' }}</div>
-        <div
+        <MarkdownRender :content="markdownText" />
-          class="markdown-preview"
-          v-html="DOMPurify.sanitize(compiledMarkdown)"
-        ></div>
       </div>
     </div>
 
@@ -88,6 +86,8 @@ import type { UploadFile } from 'element-plus'
 import { markedHighlight } from 'marked-highlight'
 import 'highlight.js/styles/github.css'
 import { ArrowLeft, Document, Picture, ArrowRight } from '@element-plus/icons-vue'
+import MarkdownRender from '@/components/MarkdownRender.vue'
+import { useRoute } from 'vue-router'
 import DOMPurify from 'dompurify'
 
 const title = ref('')
@@ -251,14 +251,15 @@ function insertAtCursor(text: string) {
     display: flex;
     flex-direction:row;
     justify-content: space-between;
+    align-items: flex-start;
     gap: 16px;
     margin-top:20px;
     min-height: 100%;
 
     .editor-pane,
     .preview-pane {
+      min-height:93%;
       width:50%;
-      height:auto;
       padding: 16px;
       background: #fff;
       border-radius: 8px;
@@ -275,17 +276,11 @@ function insertAtCursor(text: string) {
     .markdown-input {
       font-size:20px;
       width: 100%;
+      
+      ::v-deep(.el-textarea__inner) {
+        border:none !important;
+        box-shadow:none !important;
+      } 
     }
-
+}
-    .markdown-preview {
-      padding-top: 10px;
-
-      img {
-        max-width: 50%;
-        height: auto;
-        display: block;
-        margin: 0.5rem 0;
-      }
-    }
-  }
 </style>