Package Exports

vuepress-plugin-code-copy

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vuepress-plugin-code-copy) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vuepress Code Copy Plugin

A plugin for Vuepress that appends a copy button to every instance of a given selector (defaults to div[class*="language-"] pre)

Installation

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

Usage

The plugin can be added to .vuepress/config.js in your Vuepress project under plugins:

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

Options

The plugin takes a number of options, which can be passed in with the plugin config in an options object:

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

selector

Type: String
Default: div[class*="language-"] pre

This is the CSS selector to which the copy button component will be attached.

align

Type: String
Default: bottom
Supported options: top and bottom

This option describes the vertical position of the copy button component as well as the successText

color

Type: String
Default: #27b1ff

This sets the color of the copy button and can take any hex code.

backgroundTransition

Type: Boolean
Default: true

Enables the background transition animation of the attached code block when a user presses the copy button.

backgroundColor

Type: String
Default: #0075b8

This sets the color of the background transition animation and can take any hex code.

successText

Type: String
Default: Copied!

This sets the text that displays when a user presses the copy button.

staticIcon

Type: Boolean
Default: false

Copy icon is only visible when hovering over code block or is always visible.