diff --git a/docs/zh/components/highlight.md b/docs/zh/components/highlight.md
index 275f0bca..3ccaa892 100644
--- a/docs/zh/components/highlight.md
+++ b/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 会有负面效果
+:::
 
 ## 示例
 
diff --git a/src/components/core/d2-highlight/index.vue b/src/components/core/d2-highlight/index.vue
index 6eec67a9..47be614a 100644
--- a/src/components/core/d2-highlight/index.vue
+++ b/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
     }
   }
 }
diff --git a/src/libs/htmlFormat.js.REMOVED.git-id b/src/components/core/d2-highlight/libs/htmlFormat.js.REMOVED.git-id
similarity index 100%
rename from src/libs/htmlFormat.js.REMOVED.git-id
rename to src/components/core/d2-highlight/libs/htmlFormat.js.REMOVED.git-id
diff --git a/src/pages/demo/components/editor-quill/index.vue b/src/pages/demo/components/editor-quill/index.vue
index 1cdd0fc1..51310c2f 100644
--- a/src/pages/demo/components/editor-quill/index.vue
+++ b/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')