diff --git a/build/webpack.config.js b/build/webpack.config.js
index d1734c3ca..611929d99 100644
--- a/build/webpack.config.js
+++ b/build/webpack.config.js
@@ -126,31 +126,6 @@ if (process.env.NODE_ENV === 'production') {
               slugify: slugify,
               permalink: true,
               permalinkBefore: true
-            }],
-            [require('markdown-it-container'), 'demo', {
-              validate: function(params) {
-                return params.trim().match(/^demo\s*(.*)$/);
-              },
-
-              render: function(tokens, idx) {
-                var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
-                if (tokens[idx].nesting === 1) {
-                  var description = (m && m.length > 1) ? m[1] : '';
-                  var content = tokens[idx + 1].content;
-                  var html = convert(striptags.strip(content, ['script', 'style']));
-                  var script = striptags.fetch(content, 'script');
-                  var style = striptags.fetch(content, 'style');
-                  var descriptionHTML = description
-                    ? md.render(description)
-                    : '';
-
-                  return `<demo-block class="demo-box">
-                            <div class="source" slot="source">${html}</div>
-                            ${descriptionHTML}
-                            <div class="highlight" slot="highlight">`;
-                }
-                return '</div></demo-block>\n';
-              }
             }]
           ],
           preprocess: function(MarkdownIt, source) {
diff --git a/docs/components/demo-block.vue b/docs/components/demo-block.vue
deleted file mode 100644
index 4831e123f..000000000
--- a/docs/components/demo-block.vue
+++ /dev/null
@@ -1,196 +0,0 @@
-<template>
-  <div
-    class="demo-block"
-    :class="[blockClass, { 'hover': hovering }]"
-    @mouseenter="hovering = true"
-    @mouseleave="hovering = false">
-    <slot name="source"></slot>
-    <div class="meta">
-      <div class="description">
-        <slot></slot>
-      </div>
-      <slot name="highlight">
-      </slot>
-    </div>
-    <div class="demo-block-control" @click="isExpanded = !isExpanded">
-      <span v-show="hovering">{{ controlText }}</span>
-    </div>
-  </div>
-</template>
-
-<script type="text/babel">
-  export default {
-    data() {
-      return {
-        hovering: false,
-        isExpanded: false
-      };
-    },
-
-    computed: {
-
-      blockClass() {
-        return `demo-${this.$route.path.split('/').pop()}`;
-      },
-
-      controlText() {
-        return this.isExpanded ? '隐藏代码' : '显示代码';
-      },
-
-      codeArea() {
-        return this.$el.getElementsByClassName('meta')[0];
-      },
-
-      codeAreaHeight() {
-        if (this.$el.getElementsByClassName('description').length > 0) {
-          return Math.max(this.$el.getElementsByClassName('description')[0].clientHeight, this.$el.getElementsByClassName('highlight')[0].clientHeight);
-        }
-        return this.$el.getElementsByClassName('highlight')[0].clientHeight;
-      }
-    },
-
-    watch: {
-      isExpanded(val) {
-        this.codeArea.style.height = val ? `${this.codeAreaHeight + 1}px` : '0';
-      }
-    },
-
-    mounted() {
-      this.$nextTick(() => {
-        let highlight = this.$el.getElementsByClassName('highlight')[0];
-        if (this.$el.getElementsByClassName('description').length === 0) {
-          highlight.style.width = '100%';
-          highlight.borderRight = 'none';
-        }
-      });
-    }
-  };
-</script>
-
-<style lang="css">
-  .demo-block {
-    border: solid 1px #eaeefb;
-    border-radius: 4px;
-    transition: .2s;
-
-    &.hover {
-      box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5);
-    }
-
-    code {
-      font-family: Menlo, Monaco, Consolas, Courier, monospace;
-    }
-
-    p {
-      margin: 0;
-    }
-
-    .demo-button {
-      float: right;
-    }
-
-    .source {
-      padding: 24px;
-    }
-
-    .meta {
-      background-color: #f9fafc;
-      border-top: solid 1px #eaeefb;
-      clear: both;
-      overflow: hidden;
-      height: 0;
-      transition: height .2s;
-    }
-
-    .description {
-      padding: 18px 24px;
-      width: 40%;
-      box-sizing: border-box;
-      border-left: solid 1px #eaeefb;
-      float: right;
-      font-size: 14px;
-      line-height: 1.8;
-      color: #5e6d82;
-      word-break: break-word;
-
-      p {
-        margin: 0 0 12px;
-      }
-
-      code {
-        color: #5e6d82;
-        background-color: #e6effb;
-        margin: 0 4px;
-        transform: translateY(-2px);
-        display: inline-block;
-        padding: 1px 5px;
-        font-size: 12px;
-        border-radius: 3px;
-      }
-    }
-
-    .highlight {
-      width: 60%;
-      border-right: solid 1px #eaeefb;
-
-      pre {
-        margin: 0;
-      }
-
-      code.hljs {
-        margin: 0;
-        border: none;
-        max-height: none;
-        border-radius: 0;
-
-        &::before {
-          content: none;
-        }
-      }
-    }
-
-    .demo-block-control {
-      border-top: solid 1px #eaeefb;
-      height: 36px;
-      box-sizing: border-box;
-      background-color: #fff;
-      border-bottom-left-radius: 4px;
-      border-bottom-right-radius: 4px;
-      text-align: center;
-      margin-top: -1px;
-      color: #d3dce6;
-      cursor: pointer;
-      transition: .2s;
-      position: relative;
-
-      i {
-        font-size: 12px;
-        line-height: 36px;
-        transition: .3s;
-        &.hovering {
-          transform: translateX(-40px);
-        }
-      }
-
-      span {
-        position: absolute;
-        transform: translateX(-30px);
-        font-size: 14px;
-        line-height: 36px;
-        transition: .3s;
-        display: inline-block;
-      }
-
-      &:hover {
-        color: #20a0ff;
-        background-color: #f9fafc;
-      }
-
-      & .text-slide-enter,
-      & .text-slide-leave-active {
-        opacity: 0;
-        transform: translateX(10px);
-      }
-    }
-  }
-</style>