diff --git a/docs/international.md b/docs/international.md
index 8ac7e9389d..2bec0cee5d 100644
--- a/docs/international.md
+++ b/docs/international.md
@@ -6,7 +6,7 @@ NutUI 2.0 以上版本支持多语言。组件默认使用中文，支持加载
 
 ### 引用整个组件库
 
-```js
+```javascript
 import Vue from 'vue';
 import NutUI from '@nutui/nutui';
 
@@ -22,7 +22,7 @@ Vue.use(NutUI, {
 
 通过 **[@nutui/babel-plugin-seperate-import](https://www.npmjs.com/package/@nutui/babel-plugin-separate-import)** 插件，我们可以根据项目需要引用 NutUI 的组件，最终只打包引用的组件，减少引入代码的体积。国际化功能同样支持按需引用的方式。
 
-```js
+```javascript
 import Vue from 'vue';
 import {locale} from '@nutui/nutui';
 
@@ -47,7 +47,7 @@ locale('en-US', enUS);
 
 ## 兼容 vue-i18n
 
-```js
+```javascript
 import VueI18n from 'vue-i18n';
 import enUS from '@nutui/nutui/dist/locales/lang/en-US';
 
@@ -73,7 +73,7 @@ const app = new Vue({
 
 使用 **vue-i18n** 时，可以通过调用 **$t** 方法来对某个位置做国际化支持的语言切换。我们也可以调用 NutUI 内置的语言切换方法 **nutTranslate** 来实现相同功能，而且还支持非常灵活的模板化传参方式。我们可以通过 **mixin** 将该语言切换方法混入到每个组件的 **methods**，方便直接调用。
 
-```js
+```javascript
 import Vue from 'vue';
 import {i18n} from '@nutui/nutui';
 
@@ -93,7 +93,7 @@ Vue.mixin({
 
 一般来说，要实现全面的国际化，我们还需要将用户自己的语言包与组件库的语言包进行合并。
 
-```js
+```javascript
 import Vue from 'vue';
 import {locale} from '@nutui/nutui';
 import enUS from '@nutui/nutui/dist/locales/lang/en-US';
diff --git a/docs/theme.md b/docs/theme.md
index d0c059861d..77cc829be6 100644
--- a/docs/theme.md
+++ b/docs/theme.md
@@ -35,7 +35,7 @@ $dark-color: #DADADA;
 
 修改 webpack 配置文件中 **sass-loader** 的配置。在 **options** 的 **data** 属性值中，先后 import 你自定义的 SCSS 文件（如 `custom.scss`）和 NutUI 的样式变量配置文件（路径为 **dist/styles/variable.scss**）。
 
-```js
+```javascript
 {
     test: /\.(sa|sc)ss$/,
     use: [
diff --git a/scripts/mdToVue.js b/scripts/mdToVue.js
index dc19c34667..6cc6ad2d8b 100644
--- a/scripts/mdToVue.js
+++ b/scripts/mdToVue.js
@@ -1,7 +1,7 @@
 const fs = require('fs');
 var path = require('path');
 let marked = require('marked');
-let package =require("../package.json") ;
+let package = require("../package.json");
 if (!marked) {
     console.log('you need npm i marked -D!');
 }
@@ -40,33 +40,35 @@ let jsroot = `<script>export default {
     }
   },
   mounted(){   
-    let that = this;
-    let pre = document.querySelectorAll('pre');     
-    for(let i=0,item;item = pre[i];i++){      
-      item.classList.toggle('prettyprint');   
-      let creatC = document.createElement('i');
-      creatC.setAttribute('copy','copy');    
-      creatC.setAttribute('data-clipboard-action','copy');
-      creatC.setAttribute('data-clipboard-target','code');
-      creatC.setAttribute('class','copy')
-      let creatA = document.createElement('i');
-      creatA.setAttribute('toast','toast');  
-      item.appendChild(creatC);
-      item.appendChild(creatA);      
-    }   
+    //let that = this;
+    //let pre = document.querySelectorAll('pre');     
+    // for(let i=0,item;item = pre[i];i++){      
+    //   item.classList.toggle('prettyprint');   
+    //   let creatC = document.createElement('i');
+    //   creatC.setAttribute('copy','copy');    
+    //   creatC.setAttribute('data-clipboard-action','copy');
+    //   creatC.setAttribute('data-clipboard-target','code');
+    //   creatC.setAttribute('class','copy')
+    //   let creatA = document.createElement('i');
+    //   creatA.setAttribute('toast','toast');  
+    //   item.appendChild(creatC);
+    //   item.appendChild(creatA);      
+    // }
 
-    let copy = this.copy;
-    new copy('.copy',{
-        target:res => {         
-          return res.previousElementSibling
-        }
-    });    
-    let demourl = 'https://nutui.jd.com/demo.html#'+that.$route.path;
+    this.$nextTick(()=>{
+        let copy = this.copy;
+        new copy('.copy',{
+            target:res => {         
+            return res.previousElementSibling
+            }
+        });    
+        let demourl = 'https://nutui.jd.com/demo.html#'+this.$route.path;
 
-    this.demourl = demourl;
-    this.qrcode.toDataURL(demourl,{width:170},(err,url)=>{
-      that.codeurl = url
-    })
+        this.demourl = demourl;
+        this.qrcode.toDataURL(demourl,{width:170},(err,url)=>{
+            this.codeurl = url
+        });
+    });
   }
 }
 </script>`;
@@ -76,7 +78,7 @@ let jsroot = `<script>export default {
  */
 function insert(sorce) {
     var insert = sorce.indexOf('</h1>');
-    
+
     if (insert > -1) {
         return sorce.substring(0, insert) + '<i class="qrcode"><a :href="demourl"><span>请使用手机扫码体验</span><img :src="codeurl" alt=""></a></i>' + sorce.substring(insert, sorce.length);
     } else {
@@ -91,27 +93,26 @@ function insert(sorce) {
  * @param {string} sorce  文件源
  * @param {boole} ishasCode  是否需要二维码 
  */
-function createdFile(output, sorce,ishasCode) {
+function createdFile(output, sorce, ishasCode) {
     var pathSrc = output;
-    sorce = sorce.replace(/@latest/g,'@'+package.version)
-    if(!ishasCode){       
+
+    if (!ishasCode) {
         var res = insert(sorce);
-    }   else{
-       var  res = sorce;
+    } else {
+        var res = sorce;
     }
     fs.open(pathSrc, "w+", (err, fd) => {
         var bufs = `<template><div  @click="dsCode">
         <div v-if="content" class="layer">
-          <span class="close-box" @click="closelayer"></span>
-          <div v-html="content"></div>
+          <pre><span class="close-box" @click="closelayer"></span><div v-html="content"></div></pre>
         </div>`+ res + '</div></template>' + jsroot;
         var buf = new Buffer(bufs);
-        if( typeof fd  == 'number'){
+        if (typeof fd == 'number') {
             fs.writeSync(fd, buf, 0, buf.length, 0);
-         }else{
-             console.log(pathSrc,' typeof fd ！= number 请改正文件')
-         }
-       
+        } else {
+            console.log(pathSrc, ' typeof fd ！= number 请改正文件')
+        }
+
     })
 }
 /**
@@ -120,8 +121,37 @@ function createdFile(output, sorce,ishasCode) {
  * @param {*} outPath 输出路径
  * @param {*} nohead 是否有头文件
  */
-function fileDisplay(filePath,outPath,nohead) {
+function fileDisplay(filePath, outPath, nohead) {
     var rendererMd = new marked.Renderer();
+
+    rendererMd.code = function (code, infostring, escaped) {
+        var lang = (infostring || '').match(/\S*/)[0];
+        if (this.options.highlight) {
+            var out = this.options.highlight(code, lang);
+            if (out != null && out !== code) {
+                escaped = true;
+                code = out;
+            }
+        }
+
+        if (!lang) {
+            return '<pre><code>'
+                + (escaped ? code : escape(code, true))
+                + '</code></pre>';
+        }
+
+        if (lang === 'html') {
+            code = code.replace(/@latest/g, '@' + package.version)
+        }
+
+        return '<pre class="prettyprint"><span class="lang">' + lang + '</span><code class="'
+            + this.options.langPrefix
+            + escape(lang, true)
+            + '">'
+            + (escaped ? code : escape(code, true))
+            + '</code><i class="copy" copy="copy" data-clipboard-action="copy" data-clipboard-target="code" title="复制代码"></i><i toast="toast" title="全屏"></i></pre>\n';
+    };
+
     marked.setOptions({
         renderer: rendererMd,
         highlight: function (code) {
@@ -140,7 +170,7 @@ function fileDisplay(filePath,outPath,nohead) {
                 fs.stat(filedir, (err, stats) => {
                     if (!err) {
                         if (stats.isDirectory()) {
-                            fileDisplay(filedir,outPath,nohead)
+                            fileDisplay(filedir, outPath, nohead)
                         } else {
                             //判断文件类型是否是md文件
                             if (/.md$/.test(filedir)) {
@@ -159,13 +189,13 @@ function fileDisplay(filePath,outPath,nohead) {
                                     }
                                     let newName = fileNames.reverse().join('').split('-');
                                     let resName = '';
-                                    if(newName.indexOf('doc')>-1){
+                                    if (newName.indexOf('doc') > -1) {
                                         resName = newName[newName.length - 2]
-                                    }else{
+                                    } else {
                                         resName = newName[newName.length - 1]
                                     }
-                                    
-                                    createdFile(outPath + '/' + resName + '.vue', html,nohead)
+
+                                    createdFile(outPath + '/' + resName + '.vue', html, nohead)
                                 });
                                 //文件监听
                                 let fsWatcher = fs.watchFile(filedir, {
@@ -177,7 +207,7 @@ function fileDisplay(filePath,outPath,nohead) {
                                         let html = marked(data);
                                         let filedirarry = filedir.split('/');
                                         let fileNames = filedirarry[filedirarry.length - 2];
-                                        createdFile(outPath + '/' + fileNames + '.vue', html,nohead)
+                                        createdFile(outPath + '/' + fileNames + '.vue', html, nohead)
                                     });
                                 });
                             }
@@ -190,9 +220,9 @@ function fileDisplay(filePath,outPath,nohead) {
 }
 //md转 其他格式类型
 function MdToHtml(commomOption) {
-   // commomOption = options;
+    // commomOption = options;
     //获取所有的md 转html的结果
-    fileDisplay(commomOption.entry,commomOption.output,commomOption.nohead);
+    fileDisplay(commomOption.entry, commomOption.output, commomOption.nohead);
 }
 MdToHtml.prototype.apply = function (compiler) {
     //  console.log(compiler,'lls')
diff --git a/sites/doc/asset/css/common.scss b/sites/doc/asset/css/common.scss
index 24e6534a07..3573bc685e 100644
--- a/sites/doc/asset/css/common.scss
+++ b/sites/doc/asset/css/common.scss
@@ -136,7 +136,12 @@ pre {
     position: relative;
     max-width: 100%;
     overflow: auto;
-    &>i {
+    .code-wrapper{
+        width:100%;
+        overflow:auto;
+    }
+    [toast="toast"],
+    [copy="copy"] {
         cursor: pointer;
         position: absolute;
         top: 10px;
@@ -173,10 +178,21 @@ pre {
     }
 } // 代码显示
 pre {
+    position: relative;
     background: #F2F4F5;
     border-radius: 4px;
     border: none;
     padding: 20px;
+    &>span {
+        position: absolute;
+        right: 5px;
+        bottom: 5px;
+        font-style: italic;
+        font-size: 12px;
+        color: #999;
+        text-shadow: 1px 1px #FFF;
+        user-select: none;
+    }
 }
 
 .kwd {
@@ -219,15 +235,17 @@ pre {
         color: #fff;
         font-size: 24px;
         position: absolute;
-        top: 25px;
+        top: 10px;
         right: 14px;
         z-index: 30;
-        width: 28px;
-        height: 28px;
+        width: 16px;
+        height: 16px;
         background: url(../css/i/close.png) no-repeat center;
+        background-size: cover;
         cursor: pointer;
         &:hover {
-            background: #D5E5FF url(../css/i/close.png) no-repeat center;
+            background-color: #D5E5FF;
+            background-image: url(../css/i/close.png);
         }
     }
     [toast="toast"] {
@@ -235,12 +253,12 @@ pre {
     }
     pre {
         background: none;
-        padding: 50px 100px 30px 30px;
+        padding: 0 30px;
         max-width: 100%;
         max-height: 800px;
         overflow: auto;
-        [copy="copy"] {
-            right: 47px;
+        &>i,.lang {
+            display: none;
         }
     } // .kwd{
     //     color:#ffb560;;
@@ -270,6 +288,6 @@ pre {
 
 pre.prettyprint {
     code {
-        font: 14px/24px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+        font: 13px/24px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
     }
 }
\ No newline at end of file
diff --git a/sites/doc/asset/css/style-blue.scss b/sites/doc/asset/css/style-blue.scss
index ca739b68a5..b05d9957c8 100644
--- a/sites/doc/asset/css/style-blue.scss
+++ b/sites/doc/asset/css/style-blue.scss
@@ -9,6 +9,7 @@
     }
     p {
         font-size: 14px;
+        line-height: 1.8;
         margin: 10px 0;
     }
     h1+p,
@@ -122,9 +123,10 @@
             background: #F7F7F7;
             border: 1px solid #ECECEC;
             border-radius: 2px;
-            font-size: 12px;
+            font-size: 13px;
+            line-height: 1;
             color: #3F536E;
-            padding: 5px 5px;
+            padding: 3px 5px;
             margin: 0 5px;
         }
     }