vuepress: Make code blocks copyable in default theme
Feature request
What problem does this feature solve?
This is interesting phrasing, since many features don’t solve a problem as much as provide an enhancement 😉 . That said, execCommand is a common feature of code blocks in technical documentation. If you’re writing large amounts of code, it’s often easier to have the user click a copy button (icon or text or whatever) and have a confirmation of some kind saying the text has been copied to the clipboard.
What does the proposed API look like?
Go here and hover the first code block: https://angular.io/guide/displaying-data
How should this be implemented in your opinion?
Plenty of options for implementation, including the popular clipboard.js. I think turning this feature on/off should be as simple as a boolean in the config.
Are you willing to work on this yourself?**
I wish I could, but I’m more of a technical writer than a frontend developer, so this feels a bit brazen.
Cheers all around to VuePress (just discovered this project a couple days ago and it’s AWESOME!) and to the Vue community in general. Thanks!
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 10
- Comments: 18 (4 by maintainers)
Commits related to this issue
- Fix from @howar31 found https://github.com/vuejs/vuepress/issues/703 — committed to dovy/vuepress-plugin-clipboard-copy by dovy 5 years ago
Fixed. I missed the
-plugindue to text breaking.https://github.com/dovy/vuepress-plugin-clipboard-copy/
['@dovyp/vuepress-plugin-clipboard-copy', true]😃
I’ve created a implementation, that behaves like this: https://www.youtube.com/watch?v=YJ3lnB9AxcM&feature=youtu.be Will create a PR soon
@howar31 good call. Updated, credited to you, and published to NPMJS.
Published now too for anyone who wants to install and use. https://www.npmjs.com/package/@dovyp/plugin-clipboard-copy
@rdwatters took your work and refractored it into a plugin using the same style as the code from @vuepress/plugin-medium-zoom.
Anyone is welcome to merge this into core if desired.
https://github.com/dovy/plugin-clipboard-copy
Installing as as simple as placing in your root repo and adding this to your ~/.vuepress/config.js file:
Should work out of the box for anyone.