Highlight.js is quick and easy tool to add syntax highlighting to your code blocks but one feature it lacks is a copy button to easily copy the contents of the code block.
I use Highlight.js on my personal website and wanted this feature to be able to quickly copy things I re-use so I looked at their Plugin API and was pleasantly surprised at how easy it was to extend.
The snippet below is all you need to add a copy button to your code blocks highlighted with Highlight.js. 😄
hljs.addPlugin({
"after:highlightElement": ({ el, text }) => {
/**
* el is the <code> element that was highlighted
* el.parentElement is the <pre> element
*/
const wrapper = el.parentElement;
if (wrapper == null) {
return;
}
/**
* Make the parent relative so we can absolutely
* position the copy button
*/
wrapper.classList.add("relative");
const copyButton = document.createElement("button");
copyButton.classList.add(
"absolute",
"top-2",
"right-2",
"p-2",
"text-gray-500",
"hover:text-gray-700",
);
// Lucide copy icon
copyButton.innerHTML = `<svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`;
copyButton.onclick = () => {
navigator.clipboard.writeText(text);
// Notify user that the content has been copied
toast.success("Copied to clipboard", {
description: "The code block content has been copied to the clipboard.",
});
};
// Append the copy button to the wrapper
wrapper.appendChild(copyButton);
},
});
Top comments (0)