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

Install directly into your VitePress from npmjs.

``shell
npm i @cssnr/vitepress-plugin-copybutton
`

Setup

`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.

Usage

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

`

Examples

The button can automatically detect text in Headings and Other elements.
You can also manually set the text.

$3

`markdown


$3


`

Heading 1

`markdown


$3


`

Heading 2

`markdown


$3


`

Heading 3

`markdown


$3


`

custom_anchor

`markdown


$3


`

Custom Text

$3

`markdown
Lorem ipsum dolor sit amet.
`

Lorem ipsum dolor sit amet.

`markdown
Some text. some inline code
`

Some text.

`markdown
Some text. some inline code
`

some inline code

`markdown
Some text. some inline code
`

some inline code

`markdown
Some text. some inline code
``

Some text. some inline code

$3

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

Support

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/

$3

- SwiperJS - Photo Gallery
- Contributors - GitHub Contributors
- Copy Button - Copy Text Button

Contributing

For instructions on creating a PR, see the CONTRIBUTING.md.


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