A plugin for Vuepress that appends a copy button to every instance of a given selector (defaults to div[class*="language-"] pre
)
$ npm install vuepress-plugin-code-copy
# OR
$ yarn add vuepress-plugin-code-copy
The plugin can be added to .vuepress/config.js
in your Vuepress project under plugins
:
module.exports = {
plugins: [['vuepress-plugin-code-copy', true]]
}
The plugin takes a number of options, which can be passed in with the plugin config in an options object:
module.exports = {
plugins: [
["vuepress-plugin-code-copy", {
selector: String,
align: String,
color: String,
backgroundTransition: Boolean,
backgroundColor: String,
successText: String
}
]
]
}
String
div[class*="language-"] pre
This is the CSS selector to which the copy button component will be attached.
String
bottom
top
and bottom
This option describes the vertical position of the copy button component as well as the successText
String
#27b1ff
This sets the color of the copy button and can take any hex code.
Boolean
true
Enables the background transition animation of the attached code block when a user presses the copy button.
String
#0075b8
This sets the color of the background transition animation and can take any hex code.
String
Copied!
This sets the text that displays when a user presses the copy button.
Boolean
false
Copy icon is only visible when hovering over code block or is always visible.