copy-code

该插件为代码块右上角自动添加复制按钮，方便用户复制代码内容。

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

使用

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'

• 详情：

  代码块的 CSS 选择器，用于确定需添加复制按钮的代码块范围

showInMobile

• 类型：boolean

• 默认值：false

• 详情：

  是否在移动端设备上显示复制按钮。默认情况下，移动端不显示复制按钮以避免干扰内容浏览

duration

• 类型：number

• 默认值：2000

• 详情：

  复制成功提示消息的显示时间（毫秒）。设置为 0 将禁用提示信息

ignoreSelector

• 类型：string[] | string

• 默认值：""

• 详情：

  指定复制代码时需要忽略的元素选择器。匹配的元素在复制时将被排除。

  例如：['.token.comment'] 将在复制时忽略代码块中所有带有类名 .token.comment 的元素（在 prismjs 高亮情况下，这会自动跳过注释内容）

inline

• 类型：string[] | string | boolean

• 默认值：false

• 详情：

  配置行内代码（inline code）的双击复制功能：

  • 设置为 true：启用默认选择器 '[vp-content] :not(pre) > code' 匹配行内代码元素
  • 设置为 false：禁用行内代码双击复制功能
  • 设置为自定义选择器：使用指定的选择器匹配行内代码元素

transform 仅限组合式 API

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

• 详情：

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

• 示例：

  .vuepress/client.ts

  import { useCopyCode } from '@vuepress/plugin-copy-code/client'
  
  export default {
    setup() {
      useCopyCode({
        transform: (preElement) => {
          // 删除 `.ignore` 类名的元素
          preElement.querySelectorAll('.ignore').forEach((el) => el.remove())
          // 插入版权信息
          preElement.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);
}