feat: added "copy to clipboard" to code blocks

assets/js/clipboard.js

@@ -5,17 +5,23 @@ const svgCheck =
 
 
 const addCopyButtons = (clipboard) => {
-    // 1. Look for pre > code elements in the DOM
-    document.querySelectorAll("pre > code").forEach((codeBlock) => {
-        // if buttom exists, skip
-        if (codeBlock.parentElement.querySelector(".clipboard-button")) return;
-        // 2. Create a button that will trigger a copy operation
+    var els = document.getElementsByClassName("highlight");
+    // for each highlight
+    for (var i = 0; i < els.length; i++) {
+        if (els[i].getElementsByClassName("clipboard-button").length) continue;
+
+        // find pre > code inside els[i]
+        let codeBlocks = els[i].getElementsByTagName("code");
+
+         // line numbers are inside first code block
+        let lastCodeBlock = codeBlocks[codeBlocks.length - 1];
         const button = document.createElement("button");
         button.className = "clipboard-button";
         button.type = "button";
         button.innerHTML = svgCopy;
+        // remove every second newline from lastCodeBlock.innerText
         button.addEventListener("click", () => {
-            clipboard.writeText(codeBlock.innerText).then(
+            clipboard.writeText(lastCodeBlock.innerText.replace(/\n\n/g, "\n")).then(
                 () => {
                     button.blur();
                     button.innerHTML = svgCheck;
@@ -24,12 +30,12 @@ const addCopyButtons = (clipboard) => {
                 (error) => (button.innerHTML = "Error")
             );
         });
-        // 3. Append the button directly before the pre tag
-        const pre = codeBlock.parentNode;
-        pre.parentNode.insertBefore(button, pre);
-    });
-};
-
+        // find chroma inside els[i]
+        let chroma = els[i].getElementsByClassName("chroma")[0];
+        els[i].insertBefore(button, chroma);
+        console.log(els[i].lastChild)
+    }
+}
 
 function initClipboard() {
     if (navigator && navigator.clipboard) {

assets/styles/clipboard.scss

@@ -3,26 +3,26 @@
   display: flex;
   float: right;
   right: 0;
-  padding: 0.7em;
+  padding: 0.69em;
   margin: 0.5em;
-  color: var(--lightgray);
+  color: var(--outlinegray);
   border-color: var(--dark);
   background-color: var(--lightgray);
-  filter: brightness(1.5);
-  border: 1px solid;
+  filter: contrast(1.1);
+  border: 2px solid;
   border-radius: 6px;
   font-size: 0.8em;
   z-index: 1;
   opacity: 0;
-  transition: 0.1s;
+  transition: 0.12s;
 }
 .clipboard-button > svg {
-  fill: var(--dark);
+  fill: var(--light);
+  filter: contrast(0.3);
 }
 .clipboard-button:hover {
   cursor: pointer;
   border-color: var(--primary);
-  background-color: var(--dark);
 }
 .clipboard-button:hover > svg {
   fill: var(--primary);

data/config.yaml

@@ -5,7 +5,7 @@ enableLinkPreview: true
 enableLatex: true
 enableCodeBlockTitle: true
 enableClipboard: true
-enableSPA: false
+enableSPA: true
 enableFooter: true
 enableContextualBacklinks: true
 enableRecentNotes: false