Fix copy button copying line numbers, fix selection color causing code to be poorly readable when selecting, fix selection height for code blocks, fix duplicate underline effect for tabs

Author: Bertware

themes/trafiklab-2024/assets/sass/shortcodes/_highlight.scss

@@ -3,6 +3,9 @@
   span {
     // Default color when no highlighting is used
     color: $color-white;
+    display: inline-block;
+    line-height: 16px;
+    height: 16px;
   }
 
   &:not(.code-tabs .highlight-wrapper) {
@@ -28,7 +31,7 @@
   .copy-code-button {
     position: absolute;
     z-index: 2;
-    right: 18px;
+    right: 0;
     top: 0;
     font-size: 13px;
     font-weight: 700;
@@ -60,4 +63,8 @@
     z-index: -1;
     opacity: .01;
   }
+
+  ::selection {
+    background-color: $color-purple-extra-dark;
+  }
 }

themes/trafiklab-2024/assets/sass/shortcodes/_tabs.scss

@@ -15,7 +15,6 @@
   .nav-tabs {
     position: unset;
     width: unset;
-    color: #0f0f0f;
     background: $color-black;
     list-style-type: none;
     margin: 0;
@@ -32,13 +31,14 @@
     color: #717171 !important;
     font-weight: bold;
     display: block;
-    padding: 1rem;
+    padding: 12px 16px;
     text-decoration: none;
     border-bottom: none !important;
 
     &:hover {
       --show-active-line: 1;
       color: $color-white !important;
+      box-shadow: none !important;
 
       &::after {
         width: 100%;
@@ -71,5 +71,4 @@
   .code-tabs {
     margin: 1rem 0;
   }
-
 }

themes/trafiklab-2024/layouts/_default/_markup/render-codeblock.html

@@ -1,3 +1,3 @@
-{{ $opts := merge .Options (dict "linenos" true "lineNumbersInTable" false) }}
+{{ $opts := merge .Options (dict "linenos" "inline") }}
 {{ $result := transform.HighlightCodeBlock . $opts }}
 {{ $result.Wrapped }}

themes/trafiklab-2024/layouts/partials/js/code-blocks.html

@@ -34,7 +34,11 @@
     }
 
     async function copyCodeToClipboard(button, highlightDiv) {
-        const codeToCopy = highlightDiv.querySelector(":last-child > pre > code").innerText;
+        let codeToCopy = ""
+        // Copy multiple lines without line numbers by explicitly selecting the code from each line
+        highlightDiv
+          .querySelectorAll(":last-child > pre > code > span > span:last-child")
+          .forEach((row) => {codeToCopy += row.innerText;});
         try {
             result = await navigator.permissions.query({ name: "clipboard-write" });
             if (result.state == "granted" || result.state == "prompt") {