highlightjs-copy

highlightjs-copy

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

Install

Using a CDN

<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

npm install highlightjs-copy

Usage

Basic usage

hljs.addPlugin(CopyButtonPlugin());

With a callback

hljs.addPlugin(
  CopyButtonPlugin(function (el, text) {
    console.log("Copied to clipboard", text);
  })
);

Customization

CSS selector	Details
.hljs-copy-wrapper	Applied to the parent <pre> element that wraps the .hljs code.
.hljs-copy-button	The copy button itself.
[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.