diff --git a/docs/examples-docs/icon.md b/docs/examples-docs/icon.md
index 17dc41d98..f2d7d7079 100644
--- a/docs/examples-docs/icon.md
+++ b/docs/examples-docs/icon.md
@@ -58,7 +58,7 @@ export default {
 
 设置`name`属性为对应的图标名称即可：
 
-:::demo 所有Icon
+:::demo 基础用法
 ```html
 <van-icon name="qr-invalid" style="text-align: center"></van-icon>
 ```
diff --git a/docs/src/components/demo-block.vue b/docs/src/components/demo-block.vue
index 50dfb211e..466594eaf 100644
--- a/docs/src/components/demo-block.vue
+++ b/docs/src/components/demo-block.vue
@@ -1,66 +1,15 @@
 <template>
-  <div class="demo-block" :class="blockClass">
-    <slot name="examples"></slot>
+  <zan-doc-block :class="`demo-${component}`">
     <slot name="highlight"></slot>
-  </div>
+  </zan-doc-block>
 </template>
 
 <script>
 export default {
   computed: {
-    blockClass() {
-      return `demo-${this.$route.path.split('/').pop()}`;
+    component() {
+      return this.$route.path.split('/').pop();
     }
   }
 };
 </script>
-
-<style>
-  .demo-block {
-    transition: .2s;
-    overflow: hidden;
-    margin-bottom: 20px;
-
-    code {
-      font-family: Menlo, Monaco, Consolas, Courier, monospace;
-      overflow: auto;
-      white-space: pre-wrap;
-    }
-
-    .examples {
-      width: 320px;
-      box-sizing: border-box;
-      padding: 10px 0;
-      min-height: 60px;
-      max-height: 500px;
-      overflow: auto;
-      background-color: #F8F8F8;
-      border: 1px solid #E5E5E5;
-      float: right;
-    }
-
-    .highlight {
-      box-sizing: border-box;
-      border: 1px solid #E5E5E5;
-      border-radius: 4px;
-      margin-right: 345px;
-
-      pre {
-        margin: 0;
-      }
-
-      code.hljs {
-        margin: 0;
-        border: none;
-        max-height: none;
-        border-radius: 0;
-        padding: 20px;
-        background-color: #F8F8F8;
-
-        &::before {
-          content: none;
-        }
-      }
-    }
-  }
-</style>
diff --git a/package.json b/package.json
index 059fade63..a984d1d87 100644
--- a/package.json
+++ b/package.json
@@ -135,6 +135,6 @@
     "webpack-merge": "^2.0.0",
     "webpack-node-externals": "^1.5.4",
     "webpack-vendor-chunk-plugin": "^1.0.0",
-    "zan-doc": "^0.0.9"
+    "zan-doc": "^0.1.0"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index ef2853f18..e7756f407 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7308,9 +7308,9 @@ yeast@0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
 
-zan-doc@0.0.9:
-  version "0.0.9"
-  resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.0.9.tgz#fcbd2ae743ec2b05594c124c8632345391f8a680"
+zan-doc@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.1.0.tgz#6ea2aba808c39b35b9730899f000dbf05806cbad"
   dependencies:
     cheerio "0.22.0"
     decamelize "^1.2.0"