diff --git a/src/lang/en.js b/src/lang/en.js
index 490ac206..426d3d26 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -132,6 +132,9 @@ export default {
     cancel: 'Cancel',
     confirm: 'Confirm'
   },
+  example: {
+    warning: 'Creating and editing pages cannot be cached by keep-alive because keep-alive include does not currently support caching based on routes, so it is currently cached based on component name. If you want to achieve a similar caching effect, you can use a browser caching scheme such as localStorage. Or do not use keep-alive include to cache all pages directly. See details'
+  },
   errorLog: {
     tips: 'Please click the bug icon in the upper right corner',
     description: 'Now the management system are basically the form of the spa, it enhances the user experience, but it also increases the possibility of page problems, a small negligence may lead to the entire page deadlock. Fortunately Vue provides a way to catch handling exceptions, where you can handle errors or report exceptions.',
diff --git a/src/lang/zh.js b/src/lang/zh.js
index 4394cc70..2055c5ab 100644
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -132,6 +132,9 @@ export default {
     cancel: '取 消',
     confirm: '确 定'
   },
+  example: {
+    warning: '创建和编辑页面是不能被 keep-alive 缓存的，因为keep-alive 的 include 目前不支持根据路由来缓存，所以目前都是基于 component name 来进行缓存的。如果你想类似的实现缓存效果，可以使用 localStorage 等浏览器缓存方案。或者不要使用 keep-alive 的 include，直接缓存所有页面。详情见'
+  },
   errorLog: {
     tips: '请点击右上角bug小图标',
     description: '现在的管理后台基本都是spa的形式了，它增强了用户体验，但同时也会增加页面出问题的可能性，可能一个小小的疏忽就导致整个页面的死锁。好在 Vue 官网提供了一个方法来捕获处理异常，你可以在其中进行错误处理或者异常上报。',
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 93f2157e..96095ef6 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -96,14 +96,18 @@ div:focus {
   }
 }
 
-code {
+aside {
   background: #eef1f6;
-  padding: 15px 16px;
+  padding: 8px 24px;
   margin-bottom: 20px;
+  border-radius: 2px;
   display: block;
-  line-height: 36px;
-  font-size: 15px;
-  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
+  line-height: 32px;
+  font-size: 16px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  color: #2c3e50;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 
   a {
     color: #337ab7;
@@ -115,20 +119,6 @@ code {
   }
 }
 
-.warn-content {
-  background: rgba(66, 185, 131, .1);
-  border-radius: 2px;
-  padding: 16px;
-  padding: 1rem;
-  line-height: 1.6rem;
-  word-spacing: .05rem;
-
-  a {
-    color: #42b983;
-    font-weight: 600;
-  }
-}
-
 //main-container全局样式
 .app-container {
   padding: 20px;
diff --git a/src/views/components-demo/avatar-upload.vue b/src/views/components-demo/avatar-upload.vue
index c40ef4a4..fae36ad8 100644
--- a/src/views/components-demo/avatar-upload.vue
+++ b/src/views/components-demo/avatar-upload.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="components-container">
-    <code>This is based on
+    <aside>This is based on
       <a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>.
       {{ $t('components.imageUploadTips') }}
-    </code>
+    </aside>
 
     <pan-thumb :image="image" />
 
diff --git a/src/views/components-demo/back-to-top.vue b/src/views/components-demo/back-to-top.vue
index 9bc23266..58d9d75c 100644
--- a/src/views/components-demo/back-to-top.vue
+++ b/src/views/components-demo/back-to-top.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="components-container">
-    <code>{{ $t('components.backToTopTips1') }}</code>
-    <code>{{ $t('components.backToTopTips2') }}</code>
+    <aside>{{ $t('components.backToTopTips1') }}</aside>
+    <aside>{{ $t('components.backToTopTips2') }}</aside>
     <div class="placeholder-container">
       <div>placeholder</div>
       <div>placeholder</div>
diff --git a/src/views/components-demo/count-to.vue b/src/views/components-demo/count-to.vue
index 9fae2694..70681df6 100644
--- a/src/views/components-demo/count-to.vue
+++ b/src/views/components-demo/count-to.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="components-container">
-    <p class="warn-content">
+    <aside>
       <a href="https://github.com/PanJiaChen/vue-countTo" target="_blank">countTo-component</a>
-    </p>
+    </aside>
     <count-to
       ref="example"
       :start-val="_startVal"
@@ -45,9 +45,9 @@
         <input v-model="setSuffix" name="suffixInput">
       </label>
     </div>
-    <code>&lt;count-to :start-val=&#x27;{{ _startVal }}&#x27; :end-val=&#x27;{{ _endVal }}&#x27; :duration=&#x27;{{ _duration }}&#x27;
+    <aside>&lt;count-to :start-val=&#x27;{{ _startVal }}&#x27; :end-val=&#x27;{{ _endVal }}&#x27; :duration=&#x27;{{ _duration }}&#x27;
       :decimals=&#x27;{{ _decimals }}&#x27; :separator=&#x27;{{ _separator }}&#x27; :prefix=&#x27;{{ _prefix }}&#x27; :suffix=&#x27;{{ _suffix }}&#x27;
-      :autoplay=false&gt;</code>
+      :autoplay=false&gt;</aside>
   </div>
 </template>
 
diff --git a/src/views/components-demo/dnd-list.vue b/src/views/components-demo/dnd-list.vue
index 0e4c215a..e299fa68 100644
--- a/src/views/components-demo/dnd-list.vue
+++ b/src/views/components-demo/dnd-list.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="components-container">
-    <code>drag-list base on
+    <aside>drag-list base on
       <a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a>
-    </code>
+    </aside>
     <div class="editor-container">
       <dnd-list :list1="list1" :list2="list2" list1-title="List" list2-title="Article pool" />
     </div>
diff --git a/src/views/components-demo/dropzone.vue b/src/views/components-demo/dropzone.vue
index 62e9fdad..cdfc71b1 100644
--- a/src/views/components-demo/dropzone.vue
+++ b/src/views/components-demo/dropzone.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="components-container">
-    <code>
+    <aside>
       Based on <a class="link-type" href="https://github.com/rowanwins/vue-dropzone"> dropzone </a>.
       {{ $t('components.dropzoneTips') }}
-    </code>
+    </aside>
     <div class="editor-container">
       <dropzone id="myVueDropzone" url="https://httpbin.org/post" @dropzone-removedFile="dropzoneR" @dropzone-success="dropzoneS" />
     </div>
diff --git a/src/views/components-demo/json-editor.vue b/src/views/components-demo/json-editor.vue
index 01fed710..85bf3834 100644
--- a/src/views/components-demo/json-editor.vue
+++ b/src/views/components-demo/json-editor.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="components-container">
-    <code>Json-Editor is base on <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a>. Lint
+    <aside>Json-Editor is base on <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a>. Lint
       base on <a
         href="https://github.com/codemirror/CodeMirror/blob/master/addon/lint/json-lint.js"
         target="_blank"
-      >json-lint</a>.</code>
+      >json-lint</a>.</aside>
     <div class="editor-container">
       <json-editor ref="jsonEditor" v-model="value" />
     </div>
diff --git a/src/views/components-demo/markdown.vue b/src/views/components-demo/markdown.vue
index 8483a470..876db002 100644
--- a/src/views/components-demo/markdown.vue
+++ b/src/views/components-demo/markdown.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="components-container">
-    <code>Markdown is based on
+    <aside>Markdown is based on
       <a href="https://github.com/nhnent/tui.editor" target="_blank">tui.editor</a> ，simply wrapped with Vue.
       <a
         target="_blank"
         href="https://panjiachen.github.io/vue-element-admin-site/feature/component/markdown-editor.html"
       >
         Documentation </a>
-    </code>
+    </aside>
 
     <div class="editor-container">
       <el-tag class="tag-title">
diff --git a/src/views/components-demo/split-pane.vue b/src/views/components-demo/split-pane.vue
index 4259abea..7dba353f 100644
--- a/src/views/components-demo/split-pane.vue
+++ b/src/views/components-demo/split-pane.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="components-container">
-    <code><strong>SplitPane</strong> If you've used
+    <aside><strong>SplitPane</strong> If you've used
       <a href="https://codepen.io/" target="_blank"> codepen</a>,
       <a href="https://jsfiddle.net/" target="_blank"> jsfiddle </a>will not be unfamiliar.
       <a href="https://github.com/PanJiaChen/vue-split-pane" target="_blank"> Github repository</a>
-    </code>
+    </aside>
     <split-pane split="vertical" @resize="resize">
       <template slot="paneL">
         <div class="left-container" />
diff --git a/src/views/components-demo/sticky.vue b/src/views/components-demo/sticky.vue
index db86cb2d..de86e1a1 100644
--- a/src/views/components-demo/sticky.vue
+++ b/src/views/components-demo/sticky.vue
@@ -37,7 +37,7 @@
     </sticky>
 
     <div class="components-container">
-      <code>Sticky header, {{ $t('components.stickyTips') }}</code>
+      <aside>Sticky header, {{ $t('components.stickyTips') }}</aside>
       <div>placeholder</div>
       <div>placeholder</div>
       <div>placeholder</div>
diff --git a/src/views/components-demo/tinymce.vue b/src/views/components-demo/tinymce.vue
index e1d72d1f..7900a294 100644
--- a/src/views/components-demo/tinymce.vue
+++ b/src/views/components-demo/tinymce.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="components-container">
-    <code>
+    <aside>
       {{ $t('components.tinymceTips') }}
       <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/component/rich-editor.html"> {{ $t('components.documentation') }}</a>
-    </code>
+    </aside>
     <div>
       <tinymce v-model="content" :height="300" />
     </div>
diff --git a/src/views/error-log/index.vue b/src/views/error-log/index.vue
index a0be8fc0..102b2e5b 100644
--- a/src/views/error-log/index.vue
+++ b/src/views/error-log/index.vue
@@ -4,12 +4,12 @@
     <ErrorB />
     <!-- $t is vue-i18n global function to translate lang -->
     <h3>{{ $t('errorLog.tips') }}</h3>
-    <code>
+    <aside>
       {{ $t('errorLog.description') }}
       <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/error.html">
         {{ $t('errorLog.documentation') }}
       </a>
-    </code>
+    </aside>
     <a href="#">
       <img src="https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a825546.gif">
     </a>
diff --git a/src/views/example/components/ArticleDetail.vue b/src/views/example/components/ArticleDetail.vue
index 58574ab0..561fb7e7 100644
--- a/src/views/example/components/ArticleDetail.vue
+++ b/src/views/example/components/ArticleDetail.vue
@@ -6,10 +6,10 @@
         <PlatformDropdown v-model="postForm.platforms" />
         <SourceUrlDropdown v-model="postForm.source_uri" />
         <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">
-          发布
+          Publush
         </el-button>
         <el-button v-loading="loading" type="warning" @click="draftForm">
-          草稿
+          Draft
         </el-button>
       </sticky>
 
diff --git a/src/views/example/components/Warning.vue b/src/views/example/components/Warning.vue
index bee172d4..d24fe291 100644
--- a/src/views/example/components/Warning.vue
+++ b/src/views/example/components/Warning.vue
@@ -1,11 +1,10 @@
 <template>
-  <p class="warn-content">
-    创建和编辑页面是不能被keep-alive 缓存的，因为keep-alive 的include 目前不支持根据路由来缓存，所以目前都是基于component name 来缓存的，如果你想要实现缓存的效果，可以使用localstorage 等浏览器缓存方案。或者不要使用keep-alive
-    的include，直接缓存所有页面。详情见
+  <aside>
+    {{ $t('example.warning') }}
     <a
       href="https://panjiachen.github.io/vue-element-admin-site/guide/essentials/tags-view.html"
       target="_blank"
-    >文档</a>
-  </p>
+    >Document</a>
+  </aside>
 </template>
 
diff --git a/src/views/guide/index.vue b/src/views/guide/index.vue
index 46165803..636ca275 100644
--- a/src/views/guide/index.vue
+++ b/src/views/guide/index.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="app-container">
-    <p class="warn-content">
+    <aside>
       {{ $t('guide.description') }}
       <a href="https://github.com/kamranahmedse/driver.js" target="_blank">driver.js.</a>
-    </p>
+    </aside>
     <el-button icon="el-icon-question" type="primary" @click.prevent.stop="guide">
       {{ $t('guide.button') }}
     </el-button>
diff --git a/src/views/pdf/content.js b/src/views/pdf/content.js
index e62b1a2b..6d8af175 100644
--- a/src/views/pdf/content.js
+++ b/src/views/pdf/content.js
@@ -14,11 +14,11 @@ const content = `<p>Last week at<a href="https://vuejs.london/summary" rel="nofo
 <blockquote>TL;DR: better decoupled internal modules, TypeScript, and a codebase that is easier to contribute to.</blockquote>
 <p>We are re-writing 3.0 from the ground up for a cleaner and more maintainable architecture, in particular trying to make it easier to contribute to. We are breaking some internal functionalities into individual packages in order to isolate the scope of complexity. For example, the observer module will become its own package, with its own public API and tests. Note this does not affect framework-level API— you will not have to manually import individual bits from multiple packages in order to use Vue. Instead, the final Vue package is assembled using these internal packages.</p>
 <p>The codebase is also now written in TypeScript. Although this will make proficiency in TypeScript a pre-requisite for contributing to the new codebase, we believe the type information and IDE support will actually make it easier for a new contributor to make meaningful contributions.</p>
-<p>Decoupling the observer and scheduler into separate packages also allows us to easily experiment with alternative implementations of these parts. For example, we can implement an IE11 compatible observer implementation with the same API, or an alternative scheduler that leverages<code>requestIdleCallback</code>to yield to the browser during long updates.*</p>
+<p>Decoupling the observer and scheduler into separate packages also allows us to easily experiment with alternative implementations of these parts. For example, we can implement an IE11 compatible observer implementation with the same API, or an alternative scheduler that leverages<aside>requestIdleCallback</aside>to yield to the browser during long updates.*</p>
 <p><img class=" wscnph" src="https://wpimg.wallstcn.com/4d0b5fb2-d7f9-48fd-8f1b-03362b534dd9.png" data-wscntype="image" data-wscnh="716" data-wscnw="460" /></p>
 <h4>Observation Mechanism</h4>
 <blockquote>TL;DR: more complete, precise, efficient and debuggable reactivity tracking &amp; API for creating observables.</blockquote>
-<p>3.0 will ship with a Proxy-based observer implementation that provides reactivity tracking with full language coverage. This eliminates a number of limitations of Vue 2’s current implementation based on<code>Object.defineProperty</code>:</p>
+<p>3.0 will ship with a Proxy-based observer implementation that provides reactivity tracking with full language coverage. This eliminates a number of limitations of Vue 2’s current implementation based on<aside>Object.defineProperty</aside>:</p>
 <p>The new observer also features the following:</p>
 <p>Easily understand why a component is re-rendering</p>
 <p><img class=" wscnph" src="https://wpimg.wallstcn.com/a0c9d811-1ef9-4628-8976-f7c1aaa66da0.png" data-wscntype="image" data-wscnh="540" data-wscnw="789" /></p>
@@ -28,7 +28,7 @@ const content = `<p>Last week at<a href="https://vuejs.london/summary" rel="nofo
 <blockquote>TL;DR: tree-shaking friendly output, more AOT optimizations, parser with better error info and source map support.</blockquote>
 <h4>IE11 Support*</h4>
 <blockquote>TL;DR: it will be supported, but in a separate build with the same reactivity limitations of Vue 2.x.</blockquote>
-<p>The new codebase currently targets evergreen browsers only and assumes baseline native ES2015 support. But alas, we know a lot of our users still need to support IE11 for the foreseeable future. Most of the ES2015 features used can be transpiled / polyfilled for IE11, with the exception for Proxies. Our plan is to implement an alternative observer with the same API, but using the good old ES5<code>Object.defineProperty</code>API. A separate build of Vue 3.x will be distributed using this observer implementation. However, this build will be subject to the same change detection caveats of Vue 2.x and thus not fully compatible with the “modern” build of 3.x. We are aware that this imposes some inconvenience for library authors as they will need to be aware of compatibility for two different builds, but we will make sure to provide clear guidelines on this when we reach that stage.</p>
+<p>The new codebase currently targets evergreen browsers only and assumes baseline native ES2015 support. But alas, we know a lot of our users still need to support IE11 for the foreseeable future. Most of the ES2015 features used can be transpiled / polyfilled for IE11, with the exception for Proxies. Our plan is to implement an alternative observer with the same API, but using the good old ES5<aside>Object.defineProperty</aside>API. A separate build of Vue 3.x will be distributed using this observer implementation. However, this build will be subject to the same change detection caveats of Vue 2.x and thus not fully compatible with the “modern” build of 3.x. We are aware that this imposes some inconvenience for library authors as they will need to be aware of compatibility for two different builds, but we will make sure to provide clear guidelines on this when we reach that stage.</p>
 <h3>How Do We GetThere</h3>
 <p>First of all, although we are announcing it today, we do not have a definitive timeline yet. What we do know at the moment is the steps we will be taking to get there:</p>
 <h4>1. Internal Feedback for the Runtime Prototype</h4>
diff --git a/src/views/pdf/index.vue b/src/views/pdf/index.vue
index 238d4958..b875295f 100644
--- a/src/views/pdf/index.vue
+++ b/src/views/pdf/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <code style="margin-top:15px;">{{ $t('pdf.tips') }}</code>
+    <aside style="margin-top:15px;">{{ $t('pdf.tips') }}</aside>
     <router-link target="_blank" to="/pdf/download">
       <el-button type="primary">
         Click to download PDF
diff --git a/src/views/permission/directive.vue b/src/views/permission/directive.vue
index 013c97a3..b3ef8c37 100644
--- a/src/views/permission/directive.vue
+++ b/src/views/permission/directive.vue
@@ -35,10 +35,10 @@
     </div>
 
     <div :key="'checkPermission'+key" style="margin-top:60px;">
-      <code>
+      <aside>
         {{ $t('permission.tips') }}
         <br> e.g.
-      </code>
+      </aside>
 
       <el-tabs type="border-card" style="width:550px;">
         <el-tab-pane v-if="checkPermission(['admin'])" label="Admin">
diff --git a/src/views/svg-icons/index.vue b/src/views/svg-icons/index.vue
index 9733bc3a..2715b5ea 100644
--- a/src/views/svg-icons/index.vue
+++ b/src/views/svg-icons/index.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="icons-container">
-    <p class="warn-content">
+    <aside>
       <a href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/icon.html" target="_blank">Add and use
       </a>
-    </p>
+    </aside>
     <el-tabs type="border-card">
       <el-tab-pane label="Icons">
         <div v-for="item of iconsMap" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
diff --git a/src/views/theme/index.vue b/src/views/theme/index.vue
index b67c2c67..bfa5953b 100644
--- a/src/views/theme/index.vue
+++ b/src/views/theme/index.vue
@@ -9,7 +9,7 @@
       <div class="box-item">
         <span class="field-label">{{ $t('theme.change') }} : </span>
         <el-switch v-model="theme" />
-        <code style="margin-top:15px;">{{ $t('theme.tips') }}</code>
+        <aside style="margin-top:15px;">{{ $t('theme.tips') }}</aside>
       </div>
     </el-card>
 
diff --git a/vue.config.js b/vue.config.js
index 0306b27c..bae56d78 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -86,6 +86,7 @@ module.exports = {
       .end()
 
     config
+     // https://webpack.js.org/configuration/devtool/#development
       .when(process.env.NODE_ENV === 'development',
         config => config.devtool('cheap-source-map')
       )