diff --git a/README-zh_CN.md b/README-zh_CN.md index 4c01ea0..24a142b 100644 --- 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 index 090bf5f..70d0e80 100644 --- 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 -This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! \ No newline at end of file +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 index d302015..1dd27ca 100644 --- 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 index 548487a..a5d7ed5 100644 --- 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 index 4f2032a..46811fc 100644 --- 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 index 8960d4f..75028e2 100644 --- 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'), ],