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.

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

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/

More VitePress Plugins

• 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/