NEZ-2650 fix：Integration configuration markdown 样式错误

nezha-fronted/package.json

@@ -22,6 +22,7 @@
     "@codemirror/state": "^0.19.9",
     "@codemirror/view": "^0.19.48",
     "@johmun/vue-tags-input": "^2.1.0",
+    "@kangc/v-md-editor": "^1.7.11",
     "@meta2d/activity-diagram": "^1.0.0",
     "@meta2d/chart-diagram": "^1.0.0",
     "@meta2d/class-diagram": "^1.0.0",

nezha-fronted/src/assets/css/components/common/v-md-editor.scss

@@ -0,0 +1,26 @@
+.v-md-editor-preview{
+  .github-markdown-body{
+    padding: 0;
+    h1,h2{
+      border-color: $--border-color-light;
+    }
+    h1,h2,h3,h4,h5{
+      color: $--color-text-primary;
+    }
+    h6{
+      color: $--color-text-regular;
+    }
+    .v-md-pre-wrapper{
+      border-radius: 2px;
+      background: transparent;
+      pre{
+        border-radius: 2px;
+        border: 1px solid $--border-color-light;
+        background: $--pre-background-color;
+      }
+      code{
+        color: $--color-text-regular;
+      }
+    }
+  }
+}

nezha-fronted/src/assets/css/components/index.scss

@@ -130,4 +130,5 @@
 @import './common/paramBpx/paramBox.scss';
 @import './common/picker/picker.scss';
 @import './common/threshold/threshold.scss';
+@import './common/v-md-editor.scss';
 

nezha-fronted/src/assets/css/components/page/integration/integration.scss

@@ -224,7 +224,6 @@
     .integration-configuration{
       box-sizing: border-box;
       padding: 30px;
-      padding-top: 15px;
       padding-right: 10px;
       margin-right: 20px;
       height: 100%;
@@ -244,19 +243,11 @@
         line-height: 20px;
         font-weight: 400;
         margin-top: 6px;
-        &+p{
-          margin-top: 0;
-        }
       }
       .integration-configuration-pre{
         width: 100%;
         overflow-y: auto;
         box-sizing: border-box;
-        padding: 14px;
-        background: $--select-page-hover-background-color;
-        border: 1px solid $--border-color-light;
-        opacity: 0.9;
-        border-radius: 2px;
         overflow-wrap: break-word;
         word-break: break-word;
         white-space: pre-wrap;

nezha-fronted/src/assets/css/themes/theme-dark.scss

@@ -241,6 +241,9 @@ $--web-ssh-color-text-disable: #666666;
 /* selectTable */
 $--select-table-border-color:rgba(0,0,0,0.18);
 
+/* v-md-editor */
+$--pre-background-color: #18171D;
+
 /* 图表弹框 */
 $--chart-background-color: $--background-color-empty;
 $--chart-border-color: $--border-color-light;

nezha-fronted/src/assets/css/themes/theme-light.scss

@@ -237,6 +237,9 @@ $--web-ssh-color-text-disable: #BEBEBE;
 /* selectTable */
 $--select-table-border-color:rgba(0,0,0,0.03);
 
+/* v-md-editor */
+$--pre-background-color: #f6f8fa;
+
 /* 图表弹框 */
 $--chart-background-color: #dde4ed;
 $--chart-border-color: $--color-text-label;

nezha-fronted/src/components/page/integration/integration-tabs/configuration.vue

@@ -1,11 +1,10 @@
 <template>
   <div class="integration-configuration">
-    <div class="integration-configuration-pre" v-html="converterData()"></div>
+    <v-md-preview :text="configuration"></v-md-preview>
   </div>
 </template>
 
 <script>
-import showdown from 'showdown'
 export default {
   name: 'integration-configuration',
   props: {
@@ -16,11 +15,7 @@ export default {
     }
   },
   methods: {
-    // 给页面插入markdown数据
-    converterData () {
-      const converter = new showdown.Converter()
-      return converter.makeHtml(this.configuration)
-    }
+
   }
 }
 </script>

nezha-fronted/src/entrance/app/main.js

@@ -43,6 +43,18 @@ import htmlToPdf from '@/components/common/js/htmlToPdf'
 import mainMixin from '@/components/common/mixin/mainMixinFun'
 import introJS from 'intro.js'
 
+// v-md-editor
+import VMdPreview from '@kangc/v-md-editor/lib/preview'
+import '@kangc/v-md-editor/lib/style/preview.css'
+import githubTheme from '@kangc/v-md-editor/lib/theme/github.js'
+import '@kangc/v-md-editor/lib/theme/style/github.css'
+// highlightjs
+import hljs from 'highlight.js'
+VMdPreview.use(githubTheme, {
+  Hljs: hljs
+})
+Vue.use(VMdPreview)
+
 Vue.use(VueIntro)
 Vue.use(htmlToPdf)
 Vue.use(vSelectPage, {