https://github.com/znicholasbrown/vuepress-plugin-code-copy

Vuepress 代码复制插件

Vuepress 的插件，将复制按钮附加到给定选择器的每个实例（默认为div[class*="language-"] pre）

安装

$ npm install vuepress-plugin-code-copy
# OR
$ yarn add vuepress-plugin-code-copy

用法

该插件可以添加到.vuepress/config.js您的 Vuepress 项目中plugins：

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

选项

该插件采用许多选项，可以通过选项对象中的插件配置传递这些选项：

module.exports = {
  plugins: [
    ["vuepress-plugin-code-copy", {
        selector: String,
        align: String,
        color: String,
        backgroundTransition: Boolean,
        backgroundColor: String,
        successText: String
        }
    ]
  ]
}

选择器

• 类型：String
• 默认：div[class*="language-"] pre

这是复制按钮组件将附加到的CSS 选择器。 (opens new window)

对齐

• 类型：String
• 默认：bottom
• 支持的选项：top和bottom

该选项描述了复制按钮组件的垂直位置以及successText

颜色

• 类型：String
• 默认：#27b1ff

这设置复制按钮的颜色并且可以采用任何十六进制代码 (opens new window)。

背景过渡

• 类型：Boolean
• 默认：true

当用户按下复制按钮时启用附加代码块的背景过渡动画。

背景颜色

• 类型：String
• 默认：#0075b8

这设置背景过渡动画的颜色，并且可以采用任何十六进制代码 (opens new window)。

成功文本

• 类型：String
• 默认：Copied!

这设置当用户按下复制按钮时显示的文本。

静态图标

• 类型：Boolean
• 默认：false

复制图标仅在将鼠标悬停在代码块上时可见或始终可见。