Add copy button for code blocks (#418)

Author: alphapapa

assets/js/copy-code-blocks.js

@@ -0,0 +1,32 @@
+// copy-code-blocks.js
+
+// This file implements a button attached to code blocks which copies
+// the code to the clipboard.
+
+// This selector should match the PRE elements, each of which may
+// itself contain the text to be copied, or may contain a CODE element
+// which contains the text to be copied.
+const pre_selector = "div.highlight pre";
+
+document.querySelectorAll(pre_selector).forEach(add_button_to);
+
+function add_button_to(element) {
+  div = document.createElement("div");
+  button = document.createElement("button");
+  div.classList.add("copy-button");
+  button.addEventListener("click", copy_content_of);
+  div.append(button);
+  element.prepend(div);
+}
+
+function copy_content_of(event) {
+  content = this.parentElement.parentElement.textContent + "\n";
+  navigator.clipboard.writeText(content).then(() => update_button(this));
+}
+
+function update_button(button, clicked_class = "clicked", timeout_ms = 2000) {
+  button.classList.add(clicked_class);
+  setTimeout(() => button.classList.remove(clicked_class), timeout_ms);
+}
+
+// copy-code-blocks.js ends.

assets/theme-css/code.scss

@@ -0,0 +1,44 @@
+// Rules for code blocks, including the copy button.
+
+// Selector from "pst/content/_code.scss".
+div[class*="highlight-"],
+div.highlight,
+div.literal-block-wrapper {
+  // Copy-to-clipboard button.
+  & .copy-button {
+    bottom: 10px;
+    float: right;
+    font-size: 0.875em;
+    left: 10px;
+    position: relative;
+    visibility: hidden;
+    z-index: 1;
+  }
+  &:hover .copy-button {
+    visibility: visible;
+  }
+  & .chroma .copy-button button {
+    // Fix alignment that the .chroma rules affect.
+    padding: 0.5rem;
+  }
+
+  & button {
+    background: var(--pst-color-surface);
+    border: none;
+    color: var(--pst-color-text-base);
+
+    // These classes are changed upon click by the script.
+    &:not(.clicked):hover::before {
+      content: "Copy ";
+    }
+    &.clicked::before {
+      content: "Copied ";
+    }
+
+    &::after {
+      // The Font Awesome copy icon.
+      content: var(--fa-copy);
+      font: var(--fa-font-regular);
+    }
+  }
+}

assets/theme-css/vars.css

@@ -14,4 +14,7 @@
   --colorYellow: rgb(255, 197, 83);
 
   --spht-footer-height: 6em;
+
+  /* Font Awesome icon variables. */
+  --fa-copy: "\f0c5";  /* fa-solid fa-copy */
 }