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

A simple, accessible highlightjs plugin to add a copy button to your codeblocks.
``html`
`html`
rel="stylesheet"
href="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.css"
/>
`bash`
npm install highlightjs-copy
`javascript`
hljs.addPlugin(new CopyButtonPlugin());
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
})
);
`javascript`
hljs.addPlugin(
new CopyButtonPlugin({
callback: (text, el) => console.log("Copied to clipboard", text),
})
);
`javascript`
hljs.addPlugin(
new CopyButtonPlugin({
hook: (text, el) => text + "\nCopied from my cool website.",
})
);
`html
gretel configure --key {{YOUR_API_KEY}}
`
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.
| 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.--hljs-theme-background
The variablesand--hljs-theme-colorare 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 totruefor two seconds when the copy action is performed. |.hljs-copy-alert` | A visually hidden status element that announces the copy confirmation to screen readers. |
|