Add copy to clipboard for code snippets

Author: paoloredis

assets/css/index.css

@@ -1073,4 +1073,25 @@ a[href*="#no-click"], img[src*="#no-click"] {
 
 .dd-item .highlight:hover {
   color: #5961ff;
+}
+
+.copy-button {
+  background-color: #eee;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.copy-button svg {
+  width: 16px;
+  height: 16px;
+  fill: #333;
+}
+
+.copy-button:hover {
+  background-color: #ddd;
 }

layouts/partials/scripts.html

@@ -1,5 +1,53 @@
-<!-- Code for version selectors -->
+<!-- Code for copy to clipboard button -->
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        document.querySelectorAll('div.highlight').forEach(block => {
+            // Create a wrapper for the button and message
+            const wrapper = document.createElement('div');
+            wrapper.style = 'position:absolute;top:10px;right:10px;z-index:1;display:flex;align-items:center;gap:6px;';
+
+            // Create the copy button
+            const button = document.createElement('button');
+            button.className = 'copy-button';
+            button.innerHTML = `
+                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd" clip-rule="evenodd" d="M21 8C21 6.34315 19.6569 5 18 5H10C8.34315 5 7 6.34315 7 8V20C7 21.6569 8.34315 23 10 23H18C19.6569 23 21 21.6569 21 20V8ZM19 8C19 7.44772 18.5523 7 18 7H10C9.44772 7 9 7.44772 9 8V20C9 20.5523 9.44772 21 10 21H18C18.5523 21 19 20.5523 19 20V8Z" fill="#0F0F0F"/>
+                    <path d="M6 3H16C16.5523 3 17 2.55228 17 2C17 1.44772 16.5523 1 16 1H6C4.34315 1 3 2.34315 3 4V18C3 18.5523 3.44772 19 4 19C4.55228 19 5 18.5523 5 18V4C5 3.44772 5.44772 3 6 3Z" fill="#0F0F0F"/>
+                </svg>
+            `;
+
+            // Create the "Copied!" message span
+            const message = document.createElement('span');
+            message.className = 'copied-message';
+            message.innerText = 'Copied to clipboard!';
+            message.style = 'opacity:0;transition:opacity 0.3s ease;font-size:0.75em;color:white;';
+
+            // Handle copy logic
+            button.addEventListener('click', () => {
+                const lines = block.querySelectorAll('span.cl');
+                const text = Array.from(lines).map(line => line.textContent).join('');
 
+                navigator.clipboard.writeText(text).then(() => {
+                    message.style.opacity = '1';
+                    setTimeout(() => {
+                        message.style.opacity = '0';
+                    }, 2000);
+                }).catch(err => {
+                    console.error("Copy failed", err);
+                });
+            });
+
+            // Append button and message
+            wrapper.appendChild(message);
+            wrapper.appendChild(button);
+            block.style.position = 'relative';
+            block.appendChild(wrapper);
+        });
+    });
+</script>
+
+
+<!-- Code for version selectors -->
 <script>
     window.onload = function(){
         var currentUrl = window.location.href