VitePress Plugin CopyButton

• Install
• Options
• Usage
• Examples
• 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.

npm i @cssnr/vitepress-plugin-copybutton

Setup

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:

<CB />

With a set text:

<CB text="I Copied This" />

With a boolean parameter:

<CB prev />

Examples

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

Headings

### Heading 1 <CB />

Heading 1

### Heading 2 <Badge type="tip" text="Badge" /> <CB />

Heading 2

### Heading 3 <CB /> <Badge type="tip" text="Badge" />

Heading 3

### Heading 4 <CB anchor /> <Badge type="tip" text="Badge" /> {#custom_anchor}

custom_anchor

### Heading 5 <CB text="Custom Text" />

Custom Text

Other

Lorem ipsum dolor sit amet. <CB />

Lorem ipsum dolor sit amet.

Some text. `some inline code` <CB />

Some text.

Some text. `some inline code` <CB prev />

some inline code

Some text. <CB next /> `some inline code`

some inline code

Some text. `some inline code` <CB all />

Some text. some inline code

Demos

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

If you run into any issues or need help getting started, please do one of the following:

• Report an Issue: https://github.com/cssnr/vitepress-plugin-copybutton/issues
• Q&A Discussion: https://github.com/cssnr/vitepress-plugin-copybutton/discussions/categories/q-a
• Request a Feature: https://github.com/cssnr/vitepress-plugin-copybutton/issues/new?template=1-feature.yaml
• Chat with us on Discord: https://discord.gg/wXy6m2X8wY

More VitePress Plugins

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

Contributing

All contributions are welcome including bug reports, feature requests, or pull requests.

For instructions on creating a PR for the Package or Documentation, see the CONTRIBUTING.md.

Please consider making a donation to support the development of this project and additional open source projects.

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