diff --git a/package.json b/package.json
index c6f521088ec97ccc8d64c47a8dc218c7352ea5dd..e1c54ce87023c9e71f5bdc7899aae2696ea49aef 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "@devui-design/icons": "^1.3.0",
     "@types/lodash-es": "^4.17.4",
     "lodash-es": "^4.17.20",
+    "vitepress-theme-demoblock": "^1.0.7",
     "vue": "^3.1.1",
     "vue-router": "^4.0.3"
   },
diff --git a/sites/.vitepress/config/index.ts b/sites/.vitepress/config/index.ts
index 5c0ef74fbbad7e74ad974544bd5a2ba5270386e7..c2e77e3a902998171a6d79aa2b3935f940a12c14 100644
--- a/sites/.vitepress/config/index.ts
+++ b/sites/.vitepress/config/index.ts
@@ -1,14 +1,17 @@
 import sidebar from './sidebar'
 import head from './head'
 import nav from './nav'
-
+import markdown from './markdown'
+import lang from './lang'
 const config = {
   title: "Vue DevUI",
   description: "Vue DevUI 组件库",
   head,
+  markdown,
   themeConfig: {
     sidebar,
     nav,
+    demoblock: lang,
     logo: '../../assets/logo.svg'
   },
 };
diff --git a/sites/.vitepress/config/lang.ts b/sites/.vitepress/config/lang.ts
new file mode 100644
index 0000000000000000000000000000000000000000..765aeb420777b38b236c71920dcc4f407ba567f8
--- /dev/null
+++ b/sites/.vitepress/config/lang.ts
@@ -0,0 +1,14 @@
+const lang = {
+  '/zh': {
+    'hide-text': '隐藏代码',
+    'show-text': '显示代码',
+    'copy-button-text': '复制代码片段'
+  },
+  '/en': {
+    'hide-text': 'Hide',
+    'show-text': 'Expand',
+    'copy-button-text': 'Copy'
+  }
+}
+
+export default lang
diff --git a/sites/.vitepress/config/markdown.ts b/sites/.vitepress/config/markdown.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2f3376122499d8b072eaa205e23836db4c92f6fd
--- /dev/null
+++ b/sites/.vitepress/config/markdown.ts
@@ -0,0 +1,7 @@
+const markdown = {
+  config: (md) => {
+    const { demoBlockPlugin } = require('vitepress-theme-demoblock')
+    md.use(demoBlockPlugin)
+  }
+}
+export default markdown
diff --git a/sites/.vitepress/theme/index.ts b/sites/.vitepress/theme/index.ts
index 7a5ebb457d35791fb76b665cc8af53d73279dd6d..60ebe09e72dcfeedadd86934570c77b8e7fc9163 100644
--- a/sites/.vitepress/theme/index.ts
+++ b/sites/.vitepress/theme/index.ts
@@ -1,9 +1,12 @@
 import DevUI from '../../../devui/vue-devui'
 import Theme from '../devui-theme'
+import 'vitepress-theme-demoblock/theme/styles/index.css'
+import { registerComponents } from './register-components.js'
 
 export default {
   ...Theme,
   enhanceApp({ app }) {
     app.use(DevUI)
+    registerComponents(app)
   }
 }
\ No newline at end of file
diff --git a/sites/.vitepress/theme/register-components.js b/sites/.vitepress/theme/register-components.js
new file mode 100644
index 0000000000000000000000000000000000000000..4d1f7521a0a098dab7327cab145b9442bf90a690
--- /dev/null
+++ b/sites/.vitepress/theme/register-components.js
@@ -0,0 +1,6 @@
+import Demo from 'vitepress-theme-demoblock/components/Demo.vue'
+import DemoBlock from 'vitepress-theme-demoblock/components/DemoBlock.vue'
+export function registerComponents(app) {
+  app.component('Demo', Demo)
+  app.component('DemoBlock', DemoBlock)
+}
diff --git a/sites/components/search/index.md b/sites/components/search/index.md
index 4c38986fe2b3aec1be052ca16c280b1a82032be1..0f66dbafc9ca9d0415905285c7454930c3a98b03 100644
--- a/sites/components/search/index.md
+++ b/sites/components/search/index.md
@@ -2,49 +2,53 @@
 
 ### 基本用法
 
-<p>
-Small
-<d-search size="sm" style="width: 200px"></d-search>
-Middle
-<d-search style="width: 200px"></d-search>
-Large
-<d-search iconPosition="left" size="lg" style="width: 200px"></d-search>
-Disabled
-<d-search disabled style="width: 200px"></d-search>
-</p>
-
-```html
-<!-- small -->
-<d-search size="sm"></d-search>
-<!-- middle 默认 -->
-<d-search></d-search>
-<!-- large -->
-<d-search size="lg"></d-search>
-<!-- disabled -->
-<d-search disabled></d-search>
+:::demo 使用`sm`，`''`，`lg`来定义`Search`基本类型
+
+```vue
+<template>
+  <div>
+    Small
+    <d-search size="sm" style="width: 200px"></d-search>
+    Middle
+    <d-search style="width: 200px"></d-search>
+    Large
+    <d-search iconPosition="left" size="lg" style="width: 200px"></d-search>
+    Disabled
+    <d-search disabled style="width: 200px"></d-search>
+  </div>
+</template>
 ```
+:::
 
 ### 搜索图标左置
-<p>
-  <d-search iconPosition="left" style="width: 200px"></d-search>
-</p>
 
-```html
-<d-search iconPosition="left"></d-search>
+:::demo 使用`left`，`right`来定义`Search`搜索图标位置， 默认`right`
+
+```vue
+<template>
+  <div>
+    <d-search iconPosition="left" style="width: 200px"></d-search>
+  </div>
+</template>
 ```
+:::
 
 ### 无边框
-<p>
-  <d-search iconPosition="left" noBorder style="width: 200px"></d-search>
-</p>
 
-```html
-<d-search iconPosition="left" noBorder></d-search>
+:::demo 使用`noBorder`来定义`Search`无边框
+
+```vue
+<template>
+  <div>
+    <d-search iconPosition="left" noBorder style="width: 200px"></d-search>
+  </div>
+</template>
 ```
+:::
 
 ### 双向绑定
 
-<p>
+<!-- <p>
   <d-search v-model="searchText" style="width: 200px"></d-search>
 </p>
 
@@ -59,12 +63,16 @@ export default defineComponent({
     }
   },
 })
-</script>
+</script> -->
+:::demo 使用`v-model`双向绑定
 
-```html
-<d-search v-model="searchText"></d-search>
+```vue
 
-<script lang="ts">
+<template>
+  <d-search v-model="searchText" style="width: 200px"></d-search>
+</template>
+
+<script>
 import { defineComponent, ref } from 'vue'
 
 export default defineComponent({
@@ -78,4 +86,4 @@ export default defineComponent({
 </script>
 ```
 
-
+:::
diff --git a/yarn.lock b/yarn.lock
index 2e22957cdff1b5a09aac2426ec8de02eefaa98ad..241d93cf78647a649265659382bc8fee534aec4f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3827,7 +3827,7 @@ globals@^13.6.0, globals@^13.9.0:
   dependencies:
     type-fest "^0.20.2"
 
-globby@^11.0.3:
+globby@^11.0.2, globby@^11.0.3:
   version "11.0.4"
   resolved "https://registry.nlark.com/globby/download/globby-11.0.4.tgz?cache=0&sync_timestamp=1626918569133&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fglobby%2Fdownload%2Fglobby-11.0.4.tgz#2cbaff77c2f2a62e71e9b2813a67b97a3a3001a5"
   integrity sha1-LLr/d8Lypi5x6bKBOme5ejowAaU=
@@ -4879,6 +4879,11 @@ known-css-properties@^0.21.0:
   resolved "https://registry.nlark.com/known-css-properties/download/known-css-properties-0.21.0.tgz#15fbd0bbb83447f3ce09d8af247ed47c68ede80d"
   integrity sha1-FfvQu7g0R/POCdivJH7UfGjt6A0=
 
+kolorist@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.nlark.com/kolorist/download/kolorist-1.5.0.tgz#a06f7dd11d1b5fdb743d79c8acd4e1ecbcbd89b3"
+  integrity sha1-oG990R0bX9t0PXnIrNTh7Ly9ibM=
+
 leven@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npm.taobao.org/leven/download/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
@@ -5092,7 +5097,7 @@ markdown-it-table-of-contents@^0.5.2:
   resolved "https://registry.npm.taobao.org/markdown-it-table-of-contents/download/markdown-it-table-of-contents-0.5.2.tgz#2f941d386c277887910f2c7a8a16f5a17acb829c"
   integrity sha1-L5QdOGwneIeRDyx6ihb1oXrLgpw=
 
-markdown-it@^12.0.6:
+markdown-it@^12.0.4, markdown-it@^12.0.6:
   version "12.2.0"
   resolved "https://registry.nlark.com/markdown-it/download/markdown-it-12.2.0.tgz#091f720fd5db206f80de7a8d1f1a7035fd0d38db"
   integrity sha1-CR9yD9XbIG+A3nqNHxpwNf0NONs=
@@ -5754,6 +5759,11 @@ prelude-ls@~1.1.2:
   resolved "https://registry.npm.taobao.org/prelude-ls/download/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
   integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
 
+prettier@^2.2.1:
+  version "2.3.2"
+  resolved "https://registry.nlark.com/prettier/download/prettier-2.3.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fprettier%2Fdownload%2Fprettier-2.3.2.tgz#ef280a05ec253712e486233db5c6f23441e7342d"
+  integrity sha1-7ygKBewlNxLkhiM9tcbyNEHnNC0=
+
 pretty-format@^26.0.0, pretty-format@^26.6.2:
   version "26.6.2"
   resolved "https://registry.nlark.com/pretty-format/download/pretty-format-26.6.2.tgz#e35c2705f14cb7fe2fe94fa078345b444120fc93"
@@ -6983,7 +6993,22 @@ vite@^2.3.7, vite@^2.4.4:
   optionalDependencies:
     fsevents "~2.3.2"
 
-vitepress@^0.15.6:
+vitepress-theme-demoblock@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.nlark.com/vitepress-theme-demoblock/download/vitepress-theme-demoblock-1.0.7.tgz#03010923025a8dd6e591cb5828af15693b37d63f"
+  integrity sha1-AwEJIwJajdblkctYKK8VaTs31j8=
+  dependencies:
+    camelcase "^6.2.0"
+    globby "^11.0.2"
+    kolorist "^1.5.0"
+    lodash-es "^4.17.20"
+    markdown-it "^12.0.4"
+    minimist "^1.2.5"
+    prettier "^2.2.1"
+    vitepress "^0.15.5"
+    yaml "^2.0.0-6"
+
+vitepress@^0.15.5, vitepress@^0.15.6:
   version "0.15.6"
   resolved "https://registry.nlark.com/vitepress/download/vitepress-0.15.6.tgz#b3d2487384f60deb5e0be7da1f1896c1db75025e"
   integrity sha1-s9JIc4T2DeteC+faHxiWwdt1Al4=
@@ -7375,6 +7400,11 @@ yaml@^1.10.0:
   resolved "https://registry.nlark.com/yaml/download/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha1-IwHF/78StGfejaIzOkWeKeeSDks=
 
+yaml@^2.0.0-6:
+  version "2.0.0-7"
+  resolved "https://registry.nlark.com/yaml/download/yaml-2.0.0-7.tgz#9799d9d85dfc8f01e4cc425e18e09215364beef1"
+  integrity sha1-l5nZ2F38jwHkzEJeGOCSFTZL7vE=
+
 yargs-parser@^18.1.2:
   version "18.1.3"
   resolved "https://registry.nlark.com/yargs-parser/download/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"