Make code blocks copyable in default theme
Closed this issue ยท 18 comments
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!
I am creating a sample implementation of this here: https://github.com/shershen08/vuepress/tree/dev/add-copytoclipboard
However this functionality falls between the markdown-it
parser tool that's used under the hood and the Vue.js app wrapper UI, so some feedback on the best to choose approach would be appreciated
I've created a implementation, that behaves like this: https://www.youtube.com/watch?v=YJ3lnB9AxcM&feature=youtu.be
Will create a PR soon
This is from PR's template:
To avoid wasting your time, it's best to open a feature request issue first and wait for approval before working on it.
@shershen08 Thanks for your work, but for now we don't accept any new feature requests to master. because we will focus on the next version. you can create a PR after our next version is released.
This feature can still be done through the plugin API which is in VuePress Next.
Thanks for clarification @ulivz - I've seen this note in PR template, but I didn't get it right that an extra separate issue should be created before working on feature PR.
Is this feature being worked on in VuePress Next already ? If not yet, what could be the road map to add this functionality ?
@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:
['plugin-clipboard-copy', true]
Should work out of the box for anyone.
Published now too for anyone who wants to install and use. https://www.npmjs.com/package/@dovyp/plugin-clipboard-copy
['@dovyp/plugin-clipboard-copy', true]
@dovy Thanks for the great job, and could you also help do following 2 things?
-
Follow the naming convention of VuePress's plugin to prefix your plugin name with
vuepress-plugin
, which will take better SEO and simple usage. -
Adding your fresh plugin to https://github.com/ulivz/awesome-vuepress.
@ulivz attempting to do so.
https://github.com/dovy/vuepress-clipboard-copy
https://www.npmjs.com/package/@dovyp/vuepress-clipboard-copy
I am, however, having an issue: https://cldup.com/XO80nEM6oI.png
I get around this issue by including the plugin in a ~/@dovyp
folder of my VuePress (I renamed to show you the issue).
Steps to reproduce:
- run
yarn install
- Verify ~/node_modules/@dovyp/vuepress-clipboard-copy
- Update my config.js to have
['@dovyp/vuepress-clipboard-copy', true]
in the plugins declaration.
I wonder if I have an issue in my https://github.com/dovy/vuepress-clipboard-copy/blob/master/package.json file. I have tried numerous things.
That being said, I am more than willing to have you just bring this into the core and be an official plugin of VuePress. I have no worry of ownership here. It's primarily @shershen08's work after all.
You should use @dovyp/vuepress-plugin-clipboard-copy
instead of @dovyp/vuepress-clipboard-copy
.
Fixed. I missed the -plugin
due to text breaking.
https://github.com/dovy/vuepress-plugin-clipboard-copy/
['@dovyp/vuepress-plugin-clipboard-copy', true]
:)
@dovy Thanks for your plugin but I found some small issue there.
There will be a scroll bar in Windows system if the code block has only one line:
and also on Mac OS but looks a little nicer though:
Maybe we need some overflow-y: hidden;
or some what :/
Update: I'm currently doing CSS override on theme level in .vuepress/styles/index.styl
with:
.content pre, .content pre[class*=language-] {
overflow-y: hidden;
}
but I think this will be better to be done in plugin itself.
@dovy I'm trying to use your plugin with vuepress@1.0.0-alpha.47
. However I don't see the copy button enabled. Any suggestion?
Here's my .vuepress/config.js
.
module.exports = {
title: 'Hello VuePress',
description: 'Just playing around',
plugins: ['@dovyp/vuepress-plugin-clipboard-copy'],
}
@devopsprosiva You should create issue to @dovyp/vuepress-plugin-clipboard-copy
instead of only mentioning here.
@ulivz Thanks. Created the issue dovy/vuepress-plugin-clipboard-copy#1
Do this plugin work with Vuepress2
?
How do we create a codeblock
@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:
['plugin-clipboard-copy', true]
Should work out of the box for anyone.
I've installed your plugin and setup the config, but what's the markdown code for this to work?
I need the following block to be copyable.
<div class="language-json">
{
"district_id": 1,
"prefix": "+91"
}
</div>