https://ayty.org/assets/js/copy_code.js

1// create element for copy button in code blocks
2var codeBlocks = document.querySelectorAll('pre');
3codeBlocks.forEach(function (codeBlock) {
4  if (codeBlock.querySelector('pre:not(.lineno)') || codeBlock.querySelector('code')) {
5    // create copy button
6    var copyButton = document.createElement('button');
7    copyButton.className = 'copy';
8    copyButton.type = 'button';
9    copyButton.ariaLabel = 'Copy code to clipboard';
10    copyButton.innerText = 'Copy';
11    copyButton.innerHTML = '<i class="fas fa-clipboard"></i>';
12
13    // get code from code block and copy to clipboard
14    copyButton.addEventListener('click', function () {
15      // check if code block has line numbers
16      // i.e. `kramdown.syntax_highlighter_opts.block.line_numbers` set to true in _config.yml
17      // or using `jekyll highlight` liquid tag with `linenos` option
18      if (codeBlock.querySelector('pre:not(.lineno)')) {
19        // get code from code block ignoring line numbers
20        var code = codeBlock.querySelector('pre:not(.lineno)').innerText.trim();
21      } else { // if (codeBlock.querySelector('code')) {
22        // get code from code block when line numbers are not displayed
23        var code = codeBlock.querySelector('code').innerText.trim();
24      }
25      window.navigator.clipboard.writeText(code);
26      copyButton.innerText = 'Copied';
27      copyButton.innerHTML = '<i class="fas fa-clipboard-check"></i>';
28      var waitFor = 3000;
29
30      setTimeout(function () {
31        copyButton.innerText = 'Copy';
32        copyButton.innerHTML = '<i class="fas fa-clipboard"></i>';
33      }, waitFor);
34    });
35    
36    // create wrapper div
37    var wrapper = document.createElement('div');
38    wrapper.className = 'code-display-wrapper';
39
40    // add copy button and code block to wrapper div
41    const parent = codeBlock.parentElement;
42    parent.insertBefore(wrapper, codeBlock);
43    wrapper.append(codeBlock);
44    wrapper.append(copyButton);
45  }
46});