This plugin lets you add a copy button to your single-backtick-code-blocks and general purpose copy buttons.
npm install --save-dev vitepress-copy-helper
In .vitepress/theme/index.js
:
import CopyButton from 'vitepress-copy-helper';
import 'vitepress-copy-helper/style.css'
then, in the enhanceApp
function, add:
app.component('C', CopyButton),
C
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:
import {default as CopyButton, defaultSettings} from 'vitepress-copy-helper'
import 'vitepress-copy-helper/style.css'
Just change the properties of defaultSettings
to your liking:
Property | Type | Default | Description |
---|---|---|---|
position | string | 'auto' | The position of the button, relative to the target code -element. auto , start , end |
message | string | 'copied' | The message that will be displayed when the button is clicked |
label | string | null | The label of the button, if null , no label is rendered |
classes | string | 'copy-btn' | The classes that will be added to the button |
target | string | 'auto' | Controls which code -element the button attaches to when wedged between code -elements |
preferSibling | string | 'previous' | Controls which code -element is picked when button is wedged and target is auto . previous , next |
copyToClipboard.js
is taken from vitepress core.
Package is based on @briancbarrow's excellent boilerplate project!