Getting Started

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.

To get started, install the package, setup the plugin, and view the usage.

Install

Install or Download from NPM npmjs.com

Install directly to your VitePress from npmjs with the following command.

npm

npm i @cssnr/vitepress-plugin-copybutton

pnpm

pnpm i @cssnr/vitepress-plugin-copybutton

yarn

yarn add @cssnr/vitepress-plugin-copybutton

bun

bun i @cssnr/vitepress-plugin-copybutton

Note: you can also copy the source file to your project. WIP

Setup

Add these 3 lines to your index.[js,ts].

If you don't have a .vitepress/theme/index.js file, create one.

.vitepress/theme/index.js

import DefaultTheme, { VPBadge } from 'vitepress/theme'

import CopyButton from '@cssnr/vitepress-plugin-copybutton'
import '@cssnr/vitepress-plugin-copybutton/style.css'

export default {
  ...DefaultTheme,
  enhanceApp({ app }) {
    app.component('Badge', VPBadge) 

    app.component('CB', CopyButton) 
  },
}

VPBadge Only required if you are using the VitePress Badge.

Note: The component name CB is an arbitrary string based on your preference.

Usage

Simply add a <CB /> tag to your markdown or component.

Jump to the documentation or view examples.

With a set text:

<CB text="I Copied This" />

With automatic text detection:

<CB />

See the CopyButton Documentation for <CB /> tag usage or view the Examples.