Add copy code button functionality with styling for code blocks

Author: sharadcodes

assets/css/common.css

@@ -134,3 +134,48 @@ hr {
   border-right: none !important;
   margin-bottom: 1.75rem !important;
 }
+
+/* Copy code button */
+.copy-code-button {
+  position: absolute;
+  right: 0.25rem;
+  bottom: 0.25rem;
+  opacity: 0;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  line-height: normal;
+  border: none;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  background-color: var(--white-1);
+  color: var(--gray-5);
+  transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
+}
+
+pre:hover .copy-code-button {
+  opacity: 1;
+}
+
+.copy-code-button:hover {
+  background-color: var(--white-2);
+}
+
+[data-theme="light"] .copy-code-button {
+  background-color: var(--gray-2);
+  color: var(--white-1);
+}
+
+[data-theme="light"] .copy-code-button:hover {
+  background-color: var(--gray-3);
+}
+
+@media (prefers-color-scheme: light) {
+  .copy-code-button {
+    background-color: var(--gray-2);
+    color: var(--white-1);
+  }
+
+  .copy-code-button:hover {
+    background-color: var(--gray-3);
+  }
+}

assets/js/copy-code.js

@@ -0,0 +1,44 @@
+// Function to add copy buttons to code blocks
+document.addEventListener("DOMContentLoaded", function () {
+  // Find all pre elements that contain code blocks
+  const codeBlocks = document.querySelectorAll("pre");
+
+  codeBlocks.forEach((codeBlock) => {
+    // Create the copy button
+    const copyButton = document.createElement("button");
+    copyButton.className = "copy-code-button";
+    copyButton.type = "button";
+    copyButton.innerHTML = "Copy";
+
+    // Add the button to the code block
+    codeBlock.appendChild(copyButton);
+
+    // Add position relative to the pre element for absolute positioning of the button
+    codeBlock.style.position = "relative";
+
+    // Add click event listener to the button
+    copyButton.addEventListener("click", function () {
+      // Get the text content from the code block
+      const code = codeBlock.querySelector("code") || codeBlock;
+      const text = code.textContent;
+
+      // Copy the text to clipboard
+      navigator.clipboard.writeText(text).then(
+        function () {
+          // Visual feedback - change button text temporarily
+          copyButton.innerHTML = "Copied!";
+          setTimeout(function () {
+            copyButton.innerHTML = "Copy";
+          }, 2000);
+        },
+        function (err) {
+          console.error("Could not copy text: ", err);
+          copyButton.innerHTML = "Error";
+          setTimeout(function () {
+            copyButton.innerHTML = "Copy";
+          }, 2000);
+        }
+      );
+    });
+  });
+});