copy-code

This plugin will automatically add a copy button to the top right corner of each code block on PC devices.

This plugin has been integrated into the default theme.

Usage

npm i -D @vuepress/plugin-copy-code@next

.vuepress/config.ts
import { copyCodePlugin } from '@vuepress/plugin-copy-code'

export default {
  plugins: [
    copyCodePlugin({
      // options
    }),
  ],
}

Options

selectorstring[] | string

Default'[vp-content] div[class*="language-"] pre'

Code block selector.

showInMobileboolean

Whether to display the copy button on the mobile device.

durationnumber

Default2000

Hint display time, setting it to 0 will disable the hint.

ignoreSelectorstring[] | string

Elements selector in code blocks, used to ignore related elements when copying.

For example, ['.token.comment'] will ignore nodes with the class name .token.comment in code blocks (which in prismjs refers to ignoring comments).

inlinestring[] | boolean | string

Whether to copy inline code content when double click.

true: enable it with the default selector '[vp-content] :not(pre) > code'.
false: disable it.
string | string[]: the selector of the inline code.

localesCopyCodePluginLocaleConfig

Locale config of the plugin.

Client Config

defineCopyCodeConfig(config)

Type: (config: MaybeRefOrGetter<CopyCodeClientOptions>) => void

Additional copy code options in the client side. All options of the plugin are accepted (see Options), and the ones defined here override the ones defined in Node.

In most cases, options should be defined in the Node.js configuration, but there are special situations where client-side configuration is needed. For example, you may need to pass a transform callback, which cannot be declared in Node, or determine the options according to the client context.

.vuepress/client.ts
import { defineCopyCodeConfig } from '@vuepress/plugin-copy-code/client'

defineCopyCodeConfig({
  selector: '.custom-code',
  duration: 3000,
})

transform

Type: (preElement: HTMLPreElement) => void
Default: undefined
Details:
A transformer to modify the content of the code block in the <pre> element before copying.
This option is client-side only, since a callback cannot be declared in the Node.js configuration.

Example:

.vuepress/client.ts
import { defineCopyCodeConfig } from '@vuepress/plugin-copy-code/client'

defineCopyCodeConfig({
  transform: (preElement) => {
    // Remove all `.ignore` elements
    preElement.querySelectorAll('.ignore').forEach((el) => el.remove())
    // insert copyright
    preElement.innerHTML += `\n Copied by VuePress`
  },
})

Styles

You can customize the icon of the copy button via CSS variables:

@use 'pkg:@vuepress/helper';

$copy-icon: '<svg viewBox="0 0 24 24"><path fill="none" stroke="#808080" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2"/></svg>';
$copied-icon: '<svg viewBox="0 0 24 24"><path fill="none" stroke="#808080" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9l2 2 4-4"/></svg>';

:root {