vuepress-plugin-copy-code-button v0.1.0

vuepress-plugin-copy-code-button

VuePress v2 plugin for adding a copy code button and a label with the name of the code language used in your code block.

Installation

npm install --save vuepress-plugin-copy-code-button

Usage

Add plugin to your VuePress config:

import { copyCodeButtonPlugin } from 'vuepress-plugin-copy-code-button'
import { shikiPlugin } from '@vuepress/plugin-shiki'

export default {
  plugins: [shikiPlugin(), copyCodeButtonPlugin()],
}

Theming

Use this root variables and add your styles like this:

:root {
  --copy-code-plugin-font-size: 14px;
  --copy-code-plugin-line-height: 16px;
  --copy-code-plugin-icon-size: 24px;
  --copy-code-plugin-icon-color: #fff;
  --copy-code-plugin-button-hover-color: #333;
  --copy-code-plugin-button-focus-color: #222;
  --copy-code-plugin-shadow-color: #999;
  --copy-code-title-margin: 24px;
  --copy-code-button-margin: 16px;
}

Contribution

See Contribution guide.