Added CSS for code blocks and copyToClipboard.js for code blocks

Author: R. S. Doiel

css/code-blocks.css

@@ -0,0 +1,69 @@
+/* code-block.css */
+
+/* CSS variables for code block */
+:root {
+  /* Font family for the code block */
+  --code-font-family: monospace;
+
+  /* Border color for the code block */
+  --code-border-color: #ccc;
+
+  /* Background color for the entire code block */
+  --code-background-color: #f5f5f5;
+
+  /* Copy button variables */
+  --copy-button-bg-color: #fff;
+  --copy-button-border-color: #ccc;
+  --copy-button-text-color: #000;
+  --copy-button-hover-bg-color: #f0f0f0;
+}
+
+pre {
+  border: 2px solid var(--code-border-color);
+  border-radius: 5px;
+  background-color: var(--code-background-color);
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow-x: auto;
+  max-width: 100%;
+  position: relative;
+}
+
+code {
+  display: block;
+  font-family: var(--code-font-family);
+  line-height: 1.5;
+  white-space: pre;
+}
+
+.copy-button {
+  background-color: var(--copy-button-bg-color);
+  border: 1px solid var(--copy-button-border-color);
+  color: var(--copy-button-text-color);
+  border-radius: 3px;
+  padding: 5px 10px;
+  cursor: pointer;
+  font-size: 14px;
+  position: absolute;
+  right: 10px;
+  bottom: 10px; /* Position the button at the bottom */
+}
+
+.copy-button:hover {
+  background-color: var(--copy-button-hover-bg-color);
+}
+
+.copy-button:hover::after {
+  content: 'Copy to Clipboard';
+  position: absolute;
+  right: 100%;
+  top: 50%;
+  background-color: var(--copy-button-hover-bg-color);
+  color: var(--copy-button-text-color);
+  border: 1px solid var(--copy-button-border-color);
+  border-radius: 3px;
+  padding: 5px 10px;
+  margin-right: 5px;
+  white-space: nowrap;
+  transform: translateY(-50%);
+}

src/copyToClipboard.js

@@ -0,0 +1,30 @@
+document.addEventListener('DOMContentLoaded', function() {
+  const preElements = document.querySelectorAll('pre');
+
+  preElements.forEach(pre => {
+    const codeElement = pre.querySelector('code');
+    if (codeElement) {
+      const copyButton = document.createElement('button');
+      copyButton.className = 'copy-button';
+      copyButton.innerHTML = '📋'; // Clipboard emoji
+      copyButton.setAttribute('title', 'Copy to Clipboard'); // Tooltip text
+
+      copyButton.addEventListener('click', () => {
+        const textToCopy = codeElement.textContent;
+        navigator.clipboard.writeText(textToCopy).then(() => {
+          copyButton.textContent = 'Copied!';
+          setTimeout(() => {
+            copyButton.innerHTML = '📋';
+          }, 2000);
+        }).catch(err => {
+          console.error('Failed to copy text: ', err);
+        });
+      });
+
+      pre.style.position = 'relative';
+      pre.appendChild(copyButton);
+    }
+  });
+});
+
+export {}; // This makes the file a module