clipboard.js

// Add a copy-button to all pre elements with highlighted code inside
(function(){
    var COPY_ICON = '<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 111.07 122.88"  fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><g><path d="M97.67,20.81L97.67,20.81l0.01,0.02c3.7,0.01,7.04,1.51,9.46,3.93c2.4,2.41,3.9,5.74,3.9,9.42h0.02v0.02v75.28 v0.01h-0.02c-0.01,3.68-1.51,7.03-3.93,9.46c-2.41,2.4-5.74,3.9-9.42,3.9v0.02h-0.02H38.48h-0.01v-0.02 c-3.69-0.01-7.04-1.5-9.46-3.93c-2.4-2.41-3.9-5.74-3.91-9.42H25.1c0-25.96,0-49.34,0-75.3v-0.01h0.02 c0.01-3.69,1.52-7.04,3.94-9.46c2.41-2.4,5.73-3.9,9.42-3.91v-0.02h0.02C58.22,20.81,77.95,20.81,97.67,20.81L97.67,20.81z M0.02,75.38L0,13.39v-0.01h0.02c0.01-3.69,1.52-7.04,3.93-9.46c2.41-2.4,5.74-3.9,9.42-3.91V0h0.02h59.19 c7.69,0,8.9,9.96,0.01,10.16H13.4h-0.02v-0.02c-0.88,0-1.68,0.37-2.27,0.97c-0.59,0.58-0.96,1.4-0.96,2.27h0.02v0.01v3.17 c0,19.61,0,39.21,0,58.81C10.17,83.63,0.02,84.09,0.02,75.38L0.02,75.38z M100.91,109.49V34.2v-0.02h0.02 c0-0.87-0.37-1.68-0.97-2.27c-0.59-0.58-1.4-0.96-2.28-0.96v0.02h-0.01H38.48h-0.02v-0.02c-0.88,0-1.68,0.38-2.27,0.97 c-0.59,0.58-0.96,1.4-0.96,2.27h0.02v0.01v75.28v0.02h-0.02c0,0.88,0.38,1.68,0.97,2.27c0.59,0.59,1.4,0.96,2.27,0.96v-0.02h0.01 h59.19h0.02v0.02c0.87,0,1.68-0.38,2.27-0.97c0.59-0.58,0.96-1.4,0.96-2.27L100.91,109.49L100.91,109.49L100.91,109.49 L100.91,109.49z"/></g></svg>'
    // Get the elements.
    var pre = document.getElementsByTagName('pre');
    for (var i = 0; i < pre.length; i++) {
        // Check whether this is a highlightjs code block
        var isCode = /language-|hljs/.test(pre[i].children[0].className)
        if ( isCode ) {
            var button = document.createElement('button');
            button.className = 'copy-button';
            button.title = 'Copy to clipboard';
            button.setAttribute('aria-label', 'Copy to clipboard');
            var div = document.createElement('div');
            div.innerHTML = COPY_ICON;
            button.appendChild(div.firstChild)
            pre[i].appendChild(button);
        }
    };

    var clipboard = new ClipboardJS('.copy-button', {
        target: function(trigger) {
            return trigger.previousElementSibling;
        }
    });

    clipboard.on('success', function(event) {
        event.clearSelection();
    })

    clipboard.on('error', function(event) {
        event.clearSelection();
    })

})();