Vuepress-Plugin-Clipboard

Vuepress2 插件：添加代码块复制按钮，代码一键复制

Vuepress2 plugin: generate code copy button | code clipboard

---

• vue3 + ts + setup 改进
• 减轻light主题中的过渡动画
• 添加了更多class，样式和响应式的支持 提供样式自定义

Current Site Source Code(当前站点示例源码)

Install

npm install -D vuepress-plugin-clipboard

yarn add -D vuepress-plugin-clipboard

pnpm add -D vuepress-plugin-clipboard

Usage

// .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 ?