Copy to Clipboard Integration

[jottin]

Like this highlighter a lot. I tried integrating a copy to clipboard button on each code snippet with highlighting. The copy function only works if I remove Rainbow from the page. Any advice is welcomed. Here is the script I wrote that adds a button and copies to the clipboard...

`const copyButtonLabel = "Copy";
// use a class selector if available
let blocks = document.querySelectorAll("pre.lang-html");
blocks.forEach((block) => {
// only add button if browser supports Clipboard API
if (navigator.clipboard) {
let button = document.createElement("button");
$(button).addClass( "btn btn-secondary2" );
button.innerText = copyButtonLabel;
block.appendChild(button);
button.addEventListener("click", async () => {
await copyCode(block, button);
});
}
});

async function copyCode(block, button) {
let code = block.querySelector("code");
let text = code.innerText;
await navigator.clipboard.writeText(text);
// visual feedback that task is completed
button.innerText = "Copied";
setTimeout(() => {
button.innerText = copyButtonLabel;
}, 700);
}`

<pre class="lang-html" tabindex="0"><code data-language="html"> &lt;div class="container"&gt; &lt;div class="row"&gt; &lt;div class="col"&gt;Column 1&lt;/div&gt; &lt;div class="col"&gt;Column 2&lt;/div&gt; &lt;div class="col"&gt;Column 3&lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</code></pre>

[jottin]

Not that this helps this issue, but I did run Prism and it seems to fix 'copy to clipboard'.