d2-highlight组件升级

Former-commit-id: 0c3195d9081d1086bdcef0f6db874d55aee835f6 [formerly 0c3195d9081d1086bdcef0f6db874d55aee835f6 [formerly 0c3195d9081d1086bdcef0f6db874d55aee835f6 [formerly 0c3195d9081d1086bdcef0f6db874d55aee835f6 [formerly 12da068299ba55d5e662f8a8632f1306e5b39723 [formerly 3d78de523eae0503b225f4c265bd0089c6f6c9a5]]]]]
Former-commit-id: 3acd78000fea252d22e913ef9152183ef2f58299
Former-commit-id: 7ae7ca4ff120db811bff52abe9d27801deb331b4
Former-commit-id: 513d9e25f4e5dbf8cd02538e4864f3c2bfcfb05c [formerly 4b6d9a82ba2bcb2e6ee3e75de1182ff506c23117]
Former-commit-id: 1e582207ed544ff95f130003cce03bdf44f9ff81
Former-commit-id: 4d62c9765b14ef177e38e8dc66a9cc60221c9363
Former-commit-id: 8cd32b00b58cbd576dc781cf41b79744e25dae5e
Former-commit-id: ef79a906d90ec80c9484816c7781d9794bfe000b
Former-commit-id: 5e959e1e6f1e9d21f6c478a0f5b83965d81d96b4

docs/zh/components/highlight.md

@@ -5,6 +5,11 @@
 | 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
 | --- | --- | --- | --- | --- | --- |
 | code | 代码字符串 | 非 | String |  | console.log('you lost code prop') |
+| format | 是否格式化 HTML | 非 | Boolean |  | false |
+
+::: tip
+format 建议只在内容为 HTML 的时候打开，如果内容不是 HTML，设置为 true 会有负面效果
+:::
 
 ## 示例
 

src/components/core/d2-highlight/index.vue

@@ -5,6 +5,7 @@
 <script>
 // https://highlightjs.org/usage/
 // http://highlightjs.readthedocs.io/en/latest/api.html#configure-options
+import htmlFormat from './libs/htmlFormat'
 import highlight from 'highlight.js'
 export default {
   name: 'd2-highlight',
@@ -13,6 +14,11 @@ export default {
       type: String,
       required: false,
       default: `console.log('you lost code prop')`
+    },
+    format: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data () {
@@ -30,7 +36,8 @@ export default {
   },
   methods: {
     highlight () {
-      this.highlightHTML = highlight.highlightAuto(this.code).value
+      const code = this.format ? htmlFormat(this.code) : this.code
+      this.highlightHTML = highlight.highlightAuto(code).value
     }
   }
 }

src/pages/demo/components/editor-quill/index.vue

@@ -8,26 +8,19 @@
       @selection-change="selectionChangeHandler"
       @editor-change="editorChangeHandler"/>
     <el-card shadow="never" class="d2-mt">
-      <d2-highlight :code="formated"/>
+      <d2-highlight :code="value" format/>
     </el-card>
   </d2-container>
 </template>
 
 <script>
-import htmlFormat from '@/libs/htmlFormat.js'
 import value from './value'
 export default {
   data () {
     return {
-      htmlFormat,
       value
     }
   },
-  computed: {
-    formated () {
-      return htmlFormat(this.value)
-    }
-  },
   methods: {
     textChangeHandler (delta, oldDelta, source) {
       // console.group('QuillEditor textChangeHandler')