Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/arronhunt/highlightjs-copy
📋❇️ A simple, accessible highlightjs plugin to add a copy button to your code blocks.
https://github.com/arronhunt/highlightjs-copy
highlightjs syntax-highlighting
Last synced: 42 minutes ago
JSON representation
📋❇️ A simple, accessible highlightjs plugin to add a copy button to your code blocks.
- Host: GitHub
- URL: https://github.com/arronhunt/highlightjs-copy
- Owner: arronhunt
- License: unlicense
- Created: 2021-06-13T17:23:01.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-11-01T18:07:50.000Z (2 months ago)
- Last Synced: 2025-01-05T21:03:54.577Z (7 days ago)
- Topics: highlightjs, syntax-highlighting
- Language: JavaScript
- Homepage: https://highlightjs-copy.netlify.app
- Size: 107 KB
- Stars: 103
- Watchers: 4
- Forks: 27
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# highlightjs-copy
[](https://app.netlify.com/sites/highlightjs-copy/deploys)
A simple, accessible [highlightjs](https://github.com/highlightjs/highlight.js) plugin to add a copy button to your codeblocks.
## Demo
[Check out the demo](https://highlightjs-copy.netlify.app)
## Install
### Using a CDN
```html
```
```html
```
### NPM
```bash
npm install highlightjs-copy
```
## Usage
### Basic usage
```javascript
hljs.addPlugin(new CopyButtonPlugin());
```
### Autohide
By default, the copy button is hidden until a user hovers the code block. Set this to `false` to have the copy button always visible.
```javascript
hljs.addPlugin(
new CopyButtonPlugin({
autohide: false, // Always show the copy button
})
);
```
### With a callback
```javascript
hljs.addPlugin(
new CopyButtonPlugin({
callback: (text, el) => console.log("Copied to clipboard", text),
})
);
```
### Modify copied text with hooks
```javascript
hljs.addPlugin(
new CopyButtonPlugin({
hook: (text, el) => text + "\nCopied from my cool website.",
})
);
```
### Advanced hook example
```html
gretel configure --key {{YOUR_API_KEY}}
hljs.addPlugin(
new CopyButtonPlugin({
hook: (text, el) => {
let { replace, replacewith } = el.dataset;
if (replace && replacewith) {
return text.replace(replace, replacewith);
}
return text;
},
callback: (text, el) => {
/* logs `gretel configure --key grtf32a35bbc...` */
console.log(text);
},
})
);
hljs.highlightAll();
```
## Localization
highlightjs-copy supports multiple locales by providing the correct language for accessibility.
```js
hljs.addPlugin(
new CopyButtonPlugin({
lang: "es", // The copy button now says "Copiado!" when selected.
})
);
```
This option is unnecessary if you correctly add the lang attribute to your document. You can override this behavior by providing the `lang` option as described above.
```html
hljs.addPlugin(new CopyButtonPlugin());
```
If the document has no `lang` set and the `lang` option is not provided, it will default to `en`.
## Customization
| CSS selector | Details |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `.hljs-copy-wrapper` | Applied to the parent `
` element that wraps the .hljs code. |
| `.hljs-copy-container` | A parent element to the button, in charge of absolute positioning and animating the button when hovering. |
| `.hljs-copy-button` | The copy button itself.
The variables `--hljs-theme-background` and `--hljs-theme-color` are automatically applied to the parent element. This allows the button to inherit the code block's text and background colors. |
| `[data-copied='true']` | This data attribute is applied to the copy button and is set to `true` for two seconds when the copy action is performed. |
| `.hljs-copy-alert` | A visually hidden status element that announces the copy confirmation to screen readers. |