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
复制图标仅在将鼠标悬停在代码块上时可见或始终可见。