copy-code

此插件会自动在 PC 设备上为每个代码块右上角添加复制按钮。

该插件已经集成到默认主题中。

使用

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

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

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

选项

selector

• 类型：string | string[]

• 默认值：'[vp-content] div[class*="language-"] pre'

• 详情:

  代码块选择器

showInMobile

• 类型：boolean

• 默认值：false

• 详情:

  是否展示在移动端

duration

• 类型：number

• 默认值：2000

• 详情:

  提示消息显示时间，设置为 0 会禁用提示。

ignoreSelector

• 类型：string[] | string

• 详情:

  代码块中的元素选择器，用于在复制时忽略相关元素。

  例如: ['.token.comment'] 将忽略代码块中类名为 .token.comment 的节点 （这会在 prismjs 中忽略注释）。

inlineSelector

• 类型：string[] | string | boolean

• 默认值：false

• 详情:

  是否在双击时复制行内代码内容。

  • boolean: 是否在双击时复制行内代码内容。
  • string[] | string: 选择器，表示需要复制的行内代码内容。

transform 仅限组合式 API

• 类型：(preElement: HTMLPreElement) => void

• 详情:

  一个转换器，用于在复制之前对 <pre> 中代码块内容进行修改。该选项仅在使用 useCopyCode() 时有效。

• 示例：

  import { useCopyCode } from '@vuepress/plugin-copy-code/client'
  
  export default {
    setup() {
      useCopyCode({
        transform: (preElement) => {
          // 删除 `.ignore` 类名的元素
          pre.querySelectorAll('.ignore').remove()
          // 插入版权信息
          pre.innerHTML += `\n Copied by VuePress`
        },
        // ...其它选项
      })
    },
  }

locales

• 类型：CopyCodePluginLocaleConfig

  interface CopyCodePluginLocaleData {
    /**
     * 复制文字
     */
    copy: string
  
    /**
     * 已复制文字
     */
    copied: string
  }
  
  interface CopyCodePluginLocaleConfig {
    [localePath: string]: Partial<CopyCodePluginLocaleData>
  }

• 必填：否

• 详情:

  复制按钮插件的国际化配置。

• 示例：

  .vuepress/config.ts

  import { copyCodePlugin } from '@vuepress/plugin-copy-code'
  
  export default {
    locales: {
      '/': {
        // 这是一个支持的语言
        lang: 'zh-CN',
      },
      '/xx/': {
        // 这是一个没有收到插件支持的语言
        lang: 'mm-NN',
      },
    },
  
    plugins: [
      copyCodePlugin({
        locales: {
          '/': {
            // 覆盖复制按钮标签文字
            copy: '复制此段代码',
          },
  
          '/xx/': {
            // 在这里完整设置 `mm-NN` 的多语言配置
          },
        },
      }),
    ],
  }

样式

你可以通过 CSS 变量来自定义复制按钮的样式：

: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);
}