customizable, easy-to-use copy buttons for single-backtick code blocks and general purpose copy helper for vitepress
This plugin lets you add a copy button to your single-backtick-code-blocks and general purpose copy buttons.
``bash`
npm install --save-dev vitepress-copy-helper
In .vitepress/theme/index.js:
`js`
import CopyButton from 'vitepress-copy-helper';
import 'vitepress-copy-helper/style.css'
then, in the function, add:`js`
app.component('C', CopyButton), is the name of the component you will use in your markdown files, you can change it to whatever you want.
To override the default settings, change the import to:
`js`
import {default as CopyButton, defaultSettings} from 'vitepress-copy-helper'
import 'vitepress-copy-helper/style.css'
Just change the properties of to your liking:
| Property | Type | Default | Description |
| --- | --- | --- | --- |
| position | string | 'auto' | The position of the button, relative to the target code-element. auto, start, end |null
| message | string | 'copied' | The message that will be displayed when the button is clicked |
| label | string | null | The label of the button, if , no label is rendered |code
| classes | string | 'copy-btn' | The classes that will be added to the button |
| target | string | 'auto' | Controls which -element the button attaches to when wedged between code-elements |code
| preferSibling | string | 'previous' | Controls which -element is picked when button is wedged and target is auto. previous, next` |