feat: close #19, add vuepress-plugin-code-copy to support copy code (#22

) * feat: close #19, add vuepress-plugin-code-copy to support copy code * fix: prevent highlighting automatically again
BuptStEve · Dec 19, 2019 · 3c334b3 · 3c334b3
1 parent 075d0e4
commit 3c334b3
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 9 deletions.
diff --git a/README-zh_CN.md b/README-zh_CN.md
@@ -99,6 +99,7 @@ module.exports = {
                 embed: '',
             },
             demoCodeMark: 'demo-code',
+            copyOptions: { ... },
         }]
     ],
 }
@@ -154,6 +155,12 @@ It passes [CodeSandbox options](https://codesandbox.io/docs/importing#define-api
 
 插件的标记，即跟在 `:::` 后的标记。
 
+### copyOptions
+* 类型：`Object/Boolean`
+* 默认值：`{ align: 'top', selector: '.demo-and-code-wrapper div[class*="language-"] pre' }`
+
+透传 [vuepress-plugin-code-copy](https://github.com/znicholasbrown/vuepress-plugin-code-copy#options) 的参数，或传 `false` 禁用它。
+
 ## Related
 * [vuepress-plugin-demo-block](https://github.com/xiguaxigua/vuepress-plugin-demo-block)
 

diff --git a/README.md b/README.md
@@ -99,6 +99,7 @@ module.exports = {
                 embed: '',
             },
             demoCodeMark: 'demo-code',
+            copyOptions: { ... },
         }]
     ],
 }
@@ -154,6 +155,12 @@ It passes [CodeSandbox options](https://codesandbox.io/docs/importing#define-api
 
 The mark of the plugin, follows the tag after `:::`.
 
+### copyOptions
+* Type: `Object/Boolean`
+* Default: `{ align: 'top', selector: '.demo-and-code-wrapper div[class*="language-"] pre' }`
+
+It passes [vuepress-plugin-code-copy](https://github.com/znicholasbrown/vuepress-plugin-code-copy#options)'s options, or `false` to disable it.
+
 ## Related
 * [vuepress-plugin-demo-block](https://github.com/xiguaxigua/vuepress-plugin-demo-block)
 
@@ -179,4 +186,4 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "vuepress-plugin-demo-code",
-    "version": "0.4.2",
+    "version": "0.5.0",
     "description": "📝 Demo and code plugin for vuepress",
     "main": "src/index.js",
     "files": [
@@ -34,7 +34,8 @@
     "dependencies": {
         "codesandbox": "2.1.10",
         "markdown-it-container": "^2.0.0",
-        "prismjs": "^1.17.1"
+        "prismjs": "^1.17.1",
+        "vuepress-plugin-code-copy": "^1.0.4"
     },
     "devDependencies": {
         "@babel/core": "^7.7.2",

diff --git a/src/DemoAndCode.vue b/src/DemoAndCode.vue
@@ -157,6 +157,19 @@ html {
 .demo-and-code-wrapper {
     padding: 20px 0;
 
+    // for vuepress-plugin-code-copy
+    .code-copy {
+        position: absolute;
+        top: 20px;
+        right: 0;
+
+        opacity: 1;
+
+        svg {
+            right: 10px;
+        }
+    }
+
     .code-control {
         position: sticky;
         z-index: 9;

diff --git a/src/highlight.js b/src/highlight.js
@@ -1,12 +1,12 @@
+if (typeof window !== 'undefined') {
+    // prevent highlighting automatically
+    window.Prism = { manual: true }
+}
+
 const prism = require('prismjs')
 const escapeHtml = require('escape-html')
 const loadLanguages = require('prismjs/components/index')
 
-// prevent Prism calling `highlightAll`
-prism.manual = true
-
-// loadLanguages(['markup', 'css', 'javascript'])
-
 function wrap (code, lang) {
     if (lang === 'text') {
         code = escapeHtml(code)

diff --git a/src/index.js b/src/index.js
@@ -18,11 +18,20 @@ const defaults = {
 }
 
 module.exports = (options = {}) => {
-    const { demoCodeMark = 'demo' } = options
+    const {
+        demoCodeMark = 'demo',
+        copyOptions = {
+            align: 'top',
+            selector: '.demo-and-code-wrapper div[class*="language-"] pre',
+        },
+    } = options
     const END_TYPE = `container_${demoCodeMark}_close`
 
     return {
         name: 'vuepress-plugin-demo-code',
+        plugins: [
+            ['code-copy', copyOptions],
+        ],
         enhanceAppFiles: [
             path.resolve(__dirname, 'enhanceAppFile.js'),
         ],