https://github.com/rohanharikr/vuepress-plugin-vuepress2.x-code-copy
https://github.com/rohanharikr/vuepress-plugin-vuepress2.x-code-copy
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/rohanharikr/vuepress-plugin-vuepress2.x-code-copy
- Owner: rohanharikr
- Created: 2022-04-12T20:42:27.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2022-04-12T20:52:32.000Z (about 3 years ago)
- Last Synced: 2025-01-13T08:29:09.537Z (5 months ago)
- Language: Vue
- Size: 5.86 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# BEFORE YOU SEND LAWSUITS MY WAY: I AM NOT THE ORIGINAL AUTHOR OF THIS PLUGIN. THIS MODULE HAS BEEN TAKEN FROM https://www.npmjs.com/package/vuepress-plugin-vuepress2.x-code-copy - WHY NOT FORK, I HEAR YOU CRY? WELL, I SEARCHED THE INTERNET FAR AND WIDE TO FIND THE GITHUB REPO SO I CAN FORK IT. THE REASON WHY THIS EXISTS IS BECAUSE VUEPRESS 2X WAS THROWING AN ERROR WHEN BUILDING (DOCUMENT NOT FOUND). PLUGIN WAS TRYING TO ACCESS DOM IN NODE ENV WHICH OF COURSE HAS BEEN FIXED IN THIS REPOS CODE.
# 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-lcy-code-copy
# OR
$ yarn add vuepress-plugin-lcy-code-copy
```
## Usage
The plugin can be added to `.vuepress/config.js` in your Vuepress project under `plugins`:
```javascript
module.exports = {
plugins: [['vuepress-plugin-lcy-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-lcy-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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) 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](https://htmlcolorcodes.com/).
### 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](https://htmlcolorcodes.com/).
### 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.