# 插件-代码复制

在 VuePress 中,默认的代码块没有内置的“复制”按钮功能。但是,可以通过安装插件来添加这项功能

# 安装插件

npm install vuepress-plugin-copy-code

或者

yarn add vuepress-plugin-copy-code

# 使用插件

打开你的 VuePress 配置文件(通常是 .vuepress/config.js),然后添加 vuepress-plugin-copy-code 插件配置。

module.exports = {
  plugins: [
    'vuepress-plugin-copy-code',
  ],
}

或者

module.exports = {
  plugins: [
    ['vuepress-plugin-copy-code', {
      selector: 'div[class*="language-"] pre', // 默认是 div[class*="language-"] pre
      align: 'bottom', // 'top', 'bottom' 默认为 'bottom'
      color: '#27b1ff', // 复制按钮的颜色
      backgroundTransition: true, // 复制按钮的背景颜色过渡动画
      backgroundColor: '#0075b8', // 复制按钮的背景颜色
      successText: '已复制' // 复制成功后显示的文本
    }],
  ],
}