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

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

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

Options

selector

• Type: string | string[]

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

• Details:

  Code block selector

showInMobile

• Type: boolean

• Default: false

• Details:

  Whether to display copy button on the mobile device

duration

• Type: number

• Default: 2000

• Details:

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

ignoreSelector

• Type: string[] | string

• Details:

  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).

inlineSelector

• Type: string[] | string | boolean

• Default: false

  Whether to copy inline code content when double click.

  • boolean: Whether to copy inline code content when double click.
  • string | string[]: The selector of inline code.

transform Composables API Only

• 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 only valid when using useCopyCode().

• Example:

  .vuepress/client.ts

  import { useCopyCode } from '@vuepress/plugin-copy-code/client'
  
  export default {
    setup(): void {
      useCopyCode({
        transform: (preElement) => {
          // Remove all `.ignore` elements
          pre.querySelectorAll('.ignore').remove()
          // insert copyright
          pre.innerHTML += `\n Copied by VuePress`
        },
        // ...other options
      })
    },
  }

locales

• Type: CopyCodePluginLocaleConfig

  interface CopyCodePluginLocaleData {
    /**
     * Copy text
     */
    copy: string
  
    /**
     * Copied text
     */
    copied: string
  }
  
  interface CopyCodePluginLocaleConfig {
    [localePath: string]: Partial<CopyCodePluginLocaleData>
  }

• Required: No

• Details:

  Locales config for copy code plugin.

• Example:

  .vuepress/config.ts

  import { copyCodePlugin } from '@vuepress/plugin-copy-code'
  
  export default {
    locales: {
      '/': {
        // this is a supported language
        lang: 'en-US',
      },
      '/xx/': {
        // the plugin does not support this language
        lang: 'mm-NN',
      },
    },
  
    plugins: [
      copyCodePlugin({
        locales: {
          '/': {
            // Override copy button label text
            copy: 'Copy Codes from code block',
          },
  
          '/xx/': {
            // Complete locale config for `mm-NN` language here
          },
        },
      }),
    ],
  }

Styles

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

:root {
  --code-copy-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2'%3e%3cpath 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' /%3e%3c/svg%3e");
  --code-copied-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2'%3e%3cpath 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 9 2 2 4-4' /%3e%3c/svg%3e");
  --copy-code-c-text: var(--code-c-line-number);
  --copy-code-c-hover: var(--code-c-highlight-bg);
}