Add "copy" button to code in tutorials

[jlowin]

Hovering over a code block should bring up a "copy" button to easily execute code snippets.

Wouldn't shock me if this ends up in VuePress proper, but maybe we can quickly throw something together. Not pressing.

[cicdw]

Relevant: vuejs/vuepress#703

[dovy]

As stated in #703, had a need so I packaged it up as a plugin. Fully functional and I am fine offering this to you all as a core plugin.

https://github.com/dovy/plugin-clipboard-copy

Should work out of the box for anyone.

[cicdw]

Nice @dovy thanks! I'll take a look at this.

[cicdw]

@dovy do you plan to make this npm installable?

[dovy]

Ha, sure. I was planning to see if VuePress wanted to merge this into their core. I'll take a look at getting it installable via npm.

[dovy]

https://www.npmjs.com/package/@dovyp/plugin-clipboard-copy

[jlowin]

This is so great! Thanks @dovy!

[dovy]

Let me know if you hit any problems. Works pretty solid for me.

[cicdw]

Someone correct me if I'm wrong, but I believe plugins aren't supported until vuepress 1.x, so this issue needs #770 to be resolved before I can use it.

For the record, I did include:

plugins: [['@dovyp/plugin-clipboard-copy', true]],

in config.js and

"@dovyp/plugin-clipboard-copy": "^1.0.0-alpha.3",

in package.json but the copy buttons didn't appear.

[dovy]

I’m using vuepress 1x and I couldn’t get it to work properly either. It’s so odd. It works if it’s in the root directory of my repo and I exclude the @dovyp/ bit from the config.

[ngansequitur]

@cicdw i can take a look into this!

[dovy]

@cicdw @itsngansense you can take a look here to see it fully working.

https://docs.redux.io/
https://github.com/reduxframework/docs

Files of note:
https://github.com/reduxframework/docs/@dovyp/plugin-clipboard-copy
https://github.com/reduxframework/docs/blob/master/docs/.vuepress/config.js#L67

[jlowin]

@dovy thank you! Hopefully once we work through the CSS issue in #770 blocking our upgrade, we will be able to include this

[dovy]

Ha, I am still trying to figure out how to make the sidebars be dynamic with the same style you have. I'd love the collapsable sections as your config has. ;)

[jlowin]

Thank you! Check our config.js, I think it's just done by nesting sections.

[dovy]

Fixed the issues with the install.

package.json

@dovyp/vuepress-plugin-clipboard-copy

config.js

['@dovyp/vuepress-plugin-clipboard-copy', true]

Apparently, the name mattered. ;)