VitePress Plugin to easily add a copy button to a heading, table, code snippet or text with automatic detection or pass any string.
npm install @cssnr/vitepress-plugin-copybutton














- Install
- Options
- Usage
- Examples
- Headings
- Other
- Demos
- Support
- Contributing
A VitePress Plugin to easily add a copy button to a heading, table, code snippet or paragraph with automatic text detection or pass any string.
Install directly into your VitePress from npmjs.
``shell`
npm i @cssnr/vitepress-plugin-copybutton
`javascript
import DefaultTheme, { VPBadge } from 'vitepress/theme' // only if using VPBadge
import CopyButton from '@cssnr/vitepress-plugin-copybutton' // ADD this line
import '@cssnr/vitepress-plugin-copybutton/style.css' // ADD this line
export default {
...DefaultTheme,
enhanceApp({ app }) {
app.component('Badge', VPBadge) // only if using VPBadge
app.component('CB', CopyButton) // ADD this line
},
}
`
Note: The component name CB is an arbitrary string based on your preference.
VPBadge - Only required if you are using the VitePress Badge.
All parameters are optional.
| Parameter | Type | Description of Parameter |
| :-------- | :-----: | :--------------------------------------------------------------------------- |
| text | String | Text to be copied |next
| | Boolean | Copy next element text |prev
| | Boolean | Copy previous element text |all
| | Boolean | Copy parent element text |anchor
| | Boolean | Copy anchor text (the id) |margin
| | String | CSS margin String |
With automatic text detection:
`markdown`
With a set text:
`markdown`
With a boolean parameter:
`markdown`
The button can automatically detect text in Headings and Other elements.
You can also manually set the text.
`markdown`$3
Heading 1
`markdown`$3
Heading 2
`markdown`$3
Heading 3
`markdown`$3
custom_anchor
`markdown`$3
Custom Text
`markdown`
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
`markdownsome inline code
Some text. `
Some text.
`markdownsome inline code
Some text. `
some inline code
`markdownsome inline code
Some text. `
some inline code
`markdownsome inline code
Some text. ``
Some text. some inline code
This plugin is being used extensively on the following pages:
- https://docker-deploy.cssnr.com/docs/inputs
- https://portainer-deploy.cssnr.com/docs/inputs
- https://vitepress-swiper.cssnr.com/guides/options
Please let us know if you run into any issues
or want to see a new feature.
For general help or to request a feature:
- Q&A Discussion: discussions/q-a
- Request a Feature: discussions/feature-requests
If you are experiencing an issue/bug or getting unexpected results:
- Report an Issue: cssnr/vitepress-plugin-copybutton/issues
- Chat with us on Discord: https://discord.gg/wXy6m2X8wY
- Provide General Feedback: https://cssnr.github.io/feedback/
- SwiperJS - Photo Gallery
- Contributors - GitHub Contributors
- Copy Button - Copy Text Button
For instructions on creating a PR, see the CONTRIBUTING.md.

For a full list of current projects visit: https://cssnr.github.io/