highlightjs-copy


A simple, accessible highlightjs plugin to add a copy button to your codeblocks.

!Preview

Demo

Check out the demo

Install

$3

``html

`

`html
rel="stylesheet"
href="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.css"
/>
`

$3

`bash
npm install highlightjs-copy
`

Usage

$3

`javascript
hljs.addPlugin(new CopyButtonPlugin());
`

$3

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
})
);
`

$3

`javascript
hljs.addPlugin(
new CopyButtonPlugin({
callback: (text, el) => console.log("Copied to clipboard", text),
})
);
`

$3

`javascript
hljs.addPlugin(
new CopyButtonPlugin({
hook: (text, el) => text + "\nCopied from my cool website.",
})
);
`

$3

`html



  
    gretel configure --key {{YOUR_API_KEY}}
  


`

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






`

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.                                                                                                                                            |