# vitepress-copy-helper

> customizable, easy-to-use copy buttons for single-backtick code blocks and general purpose copy helper for vitepress

Latest version **0.0.3** (published 2023-12-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install vitepress-copy-helper
pnpm add vitepress-copy-helper
yarn add vitepress-copy-helper
bun add vitepress-copy-helper
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2023-12-14 |
| First published | 2023-12-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 12.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Martin Tillmann |
| Maintainers | mtillmann |
| Keywords | vue, vitepress, vitepress-plugin, copy-and-paste, copy |

## Links

- npm: https://www.npmjs.com/package/vitepress-copy-helper
- Homepage: https://github.com/Mtillmann/vitepress-copy-helper
- Issues: https://github.com/Mtillmann/vitepress-copy-helper/issues
- npm.io page: https://npm.io/package/vitepress-copy-helper

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.2.47

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 0.0.3 (latest) — 2023-12-14
- 0.0.2 — 2023-12-14
- 0.0.1 — 2023-12-14

## README

# vitepress-copy-helper

This plugin lets you add a copy button to your single-backtick-code-blocks and general purpose copy buttons.

## Installation

```bash
npm install --save-dev vitepress-copy-helper
```

## Usage

In `.vitepress/theme/index.js`:

```js
import CopyButton from 'vitepress-copy-helper';
import 'vitepress-copy-helper/style.css'
```
then, in the `enhanceApp` function, add:
```js
app.component('C', CopyButton),
```
`C` is the name of the component you will use in your markdown files, you can change it to whatever you want.

## Default Settings

To override the default settings, change the import to:
```js
import {default as CopyButton, defaultSettings} from 'vitepress-copy-helper'
import 'vitepress-copy-helper/style.css'
```
Just change the properties of `defaultSettings` to your liking:

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| position | string | 'auto' | The position of the button, relative to the target  `code`-element. `auto`, `start`, `end` |
| message | string | 'copied' | The message that will be displayed when the button is clicked |
| label | string | null | The label of the button, if `null`, no label is rendered |
| classes | string | 'copy-btn' | The classes that will be added to the button |
| target | string | 'auto' | Controls which `code`-element the button attaches to when wedged between `code`-elements |
| preferSibling | string | 'previous' | Controls which `code`-element is picked when button is wedged and `target` is `auto`. `previous`, `next` |

## Examples

[Look here for usage examples](https://mtillmann.github.io/posts/simple-copy-button-helper-for-vitepress.html)

---
_Source: https://npm.io/package/vitepress-copy-helper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._