Vuepress2插件 — 代码剪贴板
Vuepress2 插件：添加代码块复制按钮，代码一键复制
Vuepress2 plugin: generate code copy button | code clipboard
vuepress-plugin-clipboard
- vue3 + ts + setup 改进
- 减轻light主题中的过渡动画
- 添加了更多class，样式和响应式的支持 提供样式自定义
Install
npm install -D vuepress-plugin-clipboard
yarn add -D vuepress-plugin-clipboard
Use
// .vuepress/config.js
import { clipboardPlugin } from 'vuepress-plugin-clipboard'
module.exports = {
plugins: [
clipboardPlugin({
// options ...
})
]
}
// .vuepress/config.ts
import { defineUserConfig } from 'vuepress'
import { clipboardPlugin } from 'vuepress-plugin-clipboard'
export default defineUserConfig({
plugins: [
clipboardPlugin({
// options ...
})
]
})
Options
| option | type | default | info |
|---|---|---|---|
| staticIcon | boolean | false | Copy icon is only visible when hovering over code block or is always visible. 复制按钮是否设置为悬停时可见 |
| selector | string | 'div[class*="language-"]' | This is the CSS selector to which the copy button component will be attached. 目标代码块的CSS选择器 |
| delay | number | 400 | Page animation delay(ms). Affect the generation of buttons when rendering 页面动画的延迟毫秒, 这会影响到渲染时的按钮生成 |
| color | string | "var(--c-brand)" | This sets the color of the copy button and can take any hex code. 复制按钮的颜色, 可以使用任意的十六进制颜色代码 |
| backgroundTransition | boolean | true | Enables the background transition animation of the attached code block when a user presses the copy button. 点击复制按钮时是否启动过渡动画 |
| backgroundTransitionColor | string | "var(--code-bg-color)" | This sets the color of the background transition animation and can take any hex code. 过渡动画背景颜色, 可以使用任意的十六进制颜色代码 |
| successText | string | "Copied!" | Setting the text that displays when a user presses the copy button. 复制成功后的提示词 |
| successTextColor | string | "var(--c-brand-light)" | This sets the color of the text that displays when a user presses the copy button 设置提示词的颜色, 可以使用任意的十六进制颜色代码 |
I just try my best to make thing well, Could you give a star ⭐ to encourage me ?