Security News
38% of CISOs Fear They’re Not Moving Fast Enough on AI
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
highlightjs-copy
Advanced tools
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.
<script src="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.css"
/>
npm install highlightjs-copy
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.
hljs.addPlugin(
new CopyButtonPlugin({
autohide: false, // Always show the copy button
})
);
hljs.addPlugin(
new CopyButtonPlugin({
callback: (text, el) => console.log("Copied to clipboard", text),
})
);
hljs.addPlugin(
new CopyButtonPlugin({
hook: (text, el) => text + "\nCopied from my cool website.",
})
);
<!-- Code block example -->
<pre>
<code class="language-bash" data-replace="{{YOUR_API_KEY}}" data-replaceWith="grtf32a35bbc...">
gretel configure --key {{YOUR_API_KEY}}
</code>
</pre>
<script>
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();
</script>
highlightjs-copy supports multiple locales by providing the correct language for accessibility.
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 lang="es">
<body>
<!-- The plugin language defaults to `es` to match the document, so manually setting it is unnecessary. -->
<script>
hljs.addPlugin(new CopyButtonPlugin());
</script>
</body>
</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 <pre> 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. |
FAQs
A simple, accessible highlightjs plugin to add a copy button to your codeblocks.
The npm package highlightjs-copy receives a total of 0 weekly downloads. As such, highlightjs-copy popularity was classified as not popular.
We found that highlightjs-copy demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.