diff --git a/example/app.js b/example/app.js
index 1d29354..f8f340a 100644
--- a/example/app.js
+++ b/example/app.js
@@ -1,11 +1,6 @@
 /* eslint-disable global-require */
 /* eslint-disable import/no-extraneous-dependencies */
 import fs from 'fs';
-import hljs from 'highlight.js/lib/highlight';
-import javascript from 'highlight.js/lib/languages/javascript';
-import xml from 'highlight.js/lib/languages/xml';
-import 'highlight.js/styles/atom-one-light.css';
-
 import Container from './helper/container.vue';
 import Card from './helper/card.vue';
 import Basic from './demo/Basic.vue';
@@ -23,9 +18,6 @@ import Disabled from './demo/Disabled.vue';
 import docEn from './en.md';
 import docZhCN from './zh-cn.md';
 
-hljs.registerLanguage('javascript', javascript);
-hljs.registerLanguage('xml', xml);
-
 const components = [
   {
     id: 'Basic',
@@ -133,7 +125,6 @@ const App = {
     };
   },
   mounted() {
-    hljs.initHighlighting();
     window.onhashchange = () => {
       this.currentId = this.getCurrentId();
     };
diff --git a/example/dev.html b/example/dev.html
index 7396800..d8a17eb 100644
--- a/example/dev.html
+++ b/example/dev.html
@@ -6,6 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Document</title>
     <link rel="stylesheet" href="https://unpkg.com/normalize.css@8.0.1/normalize.css" />
+    <script src="https://polyfill.io/v3/polyfill.js?features=Promise,fetch&flags=gated"></script>
   </head>
   <body>
     <div id="app"></div>
diff --git a/example/helper/card.vue b/example/helper/card.vue
index ee5c013..346c403 100644
--- a/example/helper/card.vue
+++ b/example/helper/card.vue
@@ -10,18 +10,17 @@
       <img v-else alt="hide code" class="icon-expand" src="../assets/collapse.svg" />
     </section>
     <section v-show="codeVisible" class="card-code">
-      <pre>
-        <code class="vue">{{code}}</code>
-      </pre>
+      <highlight-code :value="code"></highlight-code>
     </section>
   </div>
 </template>
 
 <script>
-// TODO: 替换img 图标, 本地
+import HighlightCode from './highlight-code';
 
 export default {
   name: 'DemoCard',
+  components: { HighlightCode },
   props: {
     id: String,
     title: String,
@@ -142,25 +141,5 @@ $border-color: #ebedf0;
 
 .card-code {
   border-top: 1px solid $border-color;
-  pre {
-    margin: 0;
-    background: #fff;
-    &::after,
-    &::before {
-      width: 0;
-    }
-    // 添加优先级, 覆盖 引入的样式
-    code {
-      display: block;
-      background: #fff;
-      color: #314659;
-      line-height: 2;
-      border: 0;
-      box-shadow: none;
-      padding: 16px 32px;
-      border-radius: 2px;
-      font-size: 14px;
-    }
-  }
 }
 </style>
diff --git a/example/helper/highlight-code.vue b/example/helper/highlight-code.vue
new file mode 100644
index 0000000..2c605d3
--- /dev/null
+++ b/example/helper/highlight-code.vue
@@ -0,0 +1,50 @@
+<template>
+  <pre class="highlight-code">
+    <code ref="code">{{value}}</code>
+  </pre>
+</template>
+
+<script>
+/* eslint-disable import/no-extraneous-dependencies */
+import hljs from 'highlight.js/lib/highlight';
+import javascript from 'highlight.js/lib/languages/javascript';
+import xml from 'highlight.js/lib/languages/xml';
+import 'highlight.js/styles/atom-one-light.css';
+
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('xml', xml);
+
+export default {
+  props: {
+    value: {
+      type: String,
+    },
+  },
+  mounted() {
+    hljs.highlightBlock(this.$refs.code);
+  },
+};
+</script>
+
+<style lang="scss">
+.highlight-code {
+  margin: 0;
+  background: #fff;
+  &::after,
+  &::before {
+    width: 0;
+  }
+  // 添加优先级, 覆盖 引入的样式
+  code {
+    display: block;
+    background: #fff;
+    color: #314659;
+    line-height: 2;
+    border: 0;
+    box-shadow: none;
+    padding: 16px 32px;
+    border-radius: 2px;
+    font-size: 14px;
+  }
+}
+</style>
diff --git a/example/index.html b/example/index.html
index f6ff292..2902bb0 100644
--- a/example/index.html
+++ b/example/index.html
@@ -7,6 +7,7 @@
     <title>Document</title>
     <link rel="stylesheet" href="https://unpkg.com/normalize.css@8.0.1/normalize.css" />
     <link rel="stylesheet" href="https://unpkg.com/vue2-datepicker/index.css" />
+    <script src="https://polyfill.io/v3/polyfill.js?features=Promise,fetch&flags=gated"></script>
   </head>
   <body>
     <div id="app"></div>
