https://nadinechang.com/assets/js/copy_code.js?v=c8a01c11a92744d44b093fc3bda915df

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