vuepress-plugin-code-copy
A Vuepress plugin that adds copy code buttons to all code blocks.
Last updated 6 years ago by znicholasbrown .
GPL-3.0-or-later · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vuepress-plugin-code-copy 
SYNC missed versions from official npm registry.

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.

Current Tags

  • 1.0.6                                ...           latest (6 years ago)

9 Versions

  • 1.0.6                                ...           6 years ago
  • 1.0.5                                ...           6 years ago
  • 1.0.4                                ...           6 years ago
  • 1.0.4-alpha                                ...           6 years ago
  • 1.0.3-alpha                                ...           7 years ago
  • 1.0.2-alpha                                ...           7 years ago
  • 1.0.1-alpha                                ...           7 years ago
  • 1.0.0-alpha                                ...           7 years ago
  • 1.0.0                                ...           7 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 8
Last Month 9
Dependencies (0)
None
Dev Dependencies (0)
None
Dependents (1)

Copyright 2013 - present © cnpmjs.org | Home |