Neurosis Prevention Mechanism

    vuepress-plugin-clipboard
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.3 • Public • Published

    vuepress-plugin-clipboard

    awesome-vuepress npm
    npm npm-download npm-size

    Home: https://vuepress.qbb.sh/clipboard/

    Source: Github

    Install

    yarn add -D vuepress-plugin-clipboard
    # or
    npm install -D vuepress-plugin-clipboard

    Use JS:

    // .vuepress/config.js
    import { clipboardPlugin } from 'vuepress-plugin-clipboard'
    module.exports = {
      plugins: [
        clipboardPlugin({
          // options ...
        })
      ]
    }

    Use TS:

    // .vuepress/config.ts
    import { defineUserConfig } from 'vuepress'
    import { clipboardPlugin } from 'vuepress-plugin-clipboard'
    
    export default defineUserConfig({
      plugins: [
        clipboardPlugin({
          // options ...
        })
      ]
    })

    Options:

    export interface ClipboardOptions {
      /**
         * @description: Copy icon is only visible when hovering over code block or is always visible.
         * @description: 复制按钮是否设置为悬停时可见
         * @default: false
         */
      staticIcon: boolean
    
      /**
         * @description: This option describes the vertical position of the copy button component as well as the `successText`
         * @description: 设置复制按钮和成功提示的垂直位置
         * @default: "bottom"
         */
      align: 'top' | 'bottom'
    
      /**
         * @description: This is the CSS selector to which the copy button component will be attached.
         * @description: 目标代码块的CSS选择器
         * @default: 'div[class*="language-"]'
         */
      selector: string
    
      /**
         * @description: Page animation delay(ms). Affect the generation of buttons when rendering
         * @description: 页面动画的延迟毫秒, 这会影响到渲染时的按钮生成
         * @default: 400
         */
      delay: number
    
      /**
         * @description: This sets the color of the copy button and can take any hex code.
         * @description: 复制按钮的颜色, 可以使用任意的十六进制颜色代码
         * @default: "var(--c-brand)"
         */
      color: string
    
      /**
         * @description: Enables the background transition animation of the attached code block when a user presses the copy button.
         * @description: 点击复制按钮时是否启动过渡动画
         * @default: true
         */
      backgroundTransition: boolean
    
      /**
         * @description: This sets the color of the background transition animation and can take any hex code.
         * @description: 过渡动画背景颜色, 可以使用任意的十六进制颜色代码
         * @default: "var(--code-bg-color)"
         */
      backgroundTransitionColor: string
    
      /**
         * @description: This sets the text that displays when a user presses the copy button.
         * @description: 复制成功后的提示词
         * @default: "Copied!"
         */
      successText: string
    
      /**
         * @description: This sets the color of the text that displays when a user presses the copy button and can take any hex code.
         * @description: 设置提示词的颜色, 可以使用任意的十六进制颜色代码
         * @default: "var(--c-brand-light)"
         */
      successTextColor: string
    }

    License

    MIT Copyright (c) 2022-present Qiubin Zheng zhengqbbb@gmail.com (https://github.com/Zhengqbbb)

    I just try my best to make thing well, Could you give a star to encourage me ?

    Install

    npm i vuepress-plugin-clipboard

    DownloadsWeekly Downloads

    117

    Version

    2.1.3

    License

    MIT

    Unpacked Size

    19.2 kB

    Total Files

    15

    Last publish

    Collaborators

    • zhengqbbb