Jekyll uses div.highlighter-rouge as the wrapper around any codeblock sections.

For each block, we create a button with an event.

First add the Javascript block

<script type="text/javascript">
  function InitCopyPaste(){
    const codeBlocks = document.querySelectorAll("div.highlighter-rouge");

    codeBlocks.forEach((codeblock, index) => {
      const code = codeBlocks[index].innerText;
      const copyCodeButton = document.createElement("button");
      copyCodeButton.innerHTML = "COPY";
      copyCodeButton.classList = "btn btn-sm btn-outline-primary";
      // insert a copy button
      copyCodeButton.onclick = function () {
        window.navigator.clipboard.writeText(code);
        copyCodeButton.innerHTML = "COPIED";
        copyCodeButton.classList.add("btn-success");
        copyCodeButton.classList.remove("btn-outline-primary");

        setTimeout(() => {
          copyCodeButton.innerHTML = "COPY";
          copyCodeButton.classList.remove("btn-success");
          copyCodeButton.classList.add("btn-outline-primary");
        }, 2000);
      };
      // make the button
      codeblock.appendChild(copyCodeButton);
    });
  }

  document.addEventListener("DOMContentLoaded", InitCopyPaste);
</script>

NEXT we will add some helpful CSS which places your button in the top-right corner of your code-block.

<style media="screen">
  div.highlighter-rouge {
    position: relative;
  }

  div.highlighter-rouge button {
    position: absolute;
    top: 2.3rem;
    left: 10px;
  }
</style>