diff --git a/src/pages/demo/plugins/quill-editor/demo.vue b/src/pages/demo/plugins/quill-editor/demo.vue
index 51e0487d..df896e70 100644
--- a/src/pages/demo/plugins/quill-editor/demo.vue
+++ b/src/pages/demo/plugins/quill-editor/demo.vue
@@ -1,22 +1,32 @@
 <template>
   <Container type="ghost">
-    <el-card>
+    <el-card class="mb">
       <QuillEditor
         v-model="value"
         @text-change="textChangeHandler"
         @selection-change="selectionChangeHandler"
         @editor-change="editorChangeHandler">
       </QuillEditor>
-      {{value}}
+    </el-card>
+    <el-card>
+      <Highlight :code="format"></Highlight>
     </el-card>
   </Container>
 </template>
 
 <script>
+import HTMLFormat from './fn'
+import value from './value'
 export default {
   data () {
     return {
-      value: '<p><strong style="background-color: rgb(240, 102, 102); color: rgb(255, 255, 255);">Hello</strong> <strong style="color: rgb(255, 255, 255); background-color: rgb(102, 163, 224);">World</strong></p>'
+      HTMLFormat,
+      value
+    }
+  },
+  computed: {
+    format () {
+      return HTMLFormat(this.value)
     }
   },
   methods: {
diff --git a/src/pages/demo/plugins/quill-editor/fn.js.REMOVED.git-id b/src/pages/demo/plugins/quill-editor/fn.js.REMOVED.git-id
new file mode 100644
index 00000000..8f465d9d
--- /dev/null
+++ b/src/pages/demo/plugins/quill-editor/fn.js.REMOVED.git-id
@@ -0,0 +1 @@
+b18165d6428d78e9e4430801d1ba8f34d558c23b
\ No newline at end of file
diff --git a/src/pages/demo/plugins/quill-editor/value.js b/src/pages/demo/plugins/quill-editor/value.js
new file mode 100644
index 00000000..3d56e215
--- /dev/null
+++ b/src/pages/demo/plugins/quill-editor/value.js
@@ -0,0 +1,9 @@
+export default `<p>
+<strong class="ql-size-large" style="color: rgb(0, 138, 0);">
+  D2 Admin
+</strong>
+by
+<strong class="ql-size-large" style="color: rgb(0, 138, 0);">
+  vue.js
+</strong>
+</p>`