add code block styles

Author: AnvarAtayev

assets/_markdown.scss

@@ -84,11 +84,52 @@
     background: var(--gray-100);
     border-radius: $border-radius;
     overflow-x: auto;
+    position: relative;
 
     code {
       padding: 0;
       background: none;
     }
+
+    .code-controls {
+      position: absolute;
+      top: $padding-8;
+      right: $padding-8;
+      display: flex;
+      align-items: center;
+      gap: $padding-4;
+      opacity: 0;
+      transition: opacity 0.15s ease;
+    }
+
+    &:hover .code-controls {
+      opacity: 1;
+    }
+
+    .code-lang {
+      font-family: monospace;
+      font-size: 0.7em;
+      color: var(--gray-500);
+      padding: 1px 6px;
+      border-radius: $border-radius;
+      background: var(--gray-200);
+      line-height: 1.6;
+    }
+
+    .code-copy-btn {
+      background: none;
+      border: none;
+      cursor: pointer;
+      color: var(--gray-500);
+      padding: 2px;
+      line-height: 0;
+      border-radius: $border-radius;
+
+      &:hover {
+        color: var(--body-font-color);
+        background: var(--gray-200);
+      }
+    }
   }
 
   p {

assets/clipboard.js

@@ -1,24 +1,41 @@
 (function () {
-  function select(element) {
-    const selection = window.getSelection();
+  var copyIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
+  var checkIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>';
 
-    const range = document.createRange();
-    range.selectNodeContents(element);
+  document.querySelectorAll("pre code").forEach(function (code) {
+    var pre = code.parentElement;
 
-    selection.removeAllRanges();
-    selection.addRange(range);
-  }
+    var langClass = Array.from(code.classList).find(function (c) {
+      return c.startsWith("language-");
+    });
+    var lang = langClass ? langClass.replace("language-", "") : null;
+
+    var controls = document.createElement("div");
+    controls.className = "code-controls";
 
-  document.querySelectorAll("pre code").forEach(code => {
-    code.addEventListener("click", function (event) {
-      if (window.getSelection().toString()) {
-        return;
-      }
-      select(code.parentElement);
+    if (lang && lang !== "fallback") {
+      var label = document.createElement("span");
+      label.className = "code-lang";
+      label.textContent = lang;
+      controls.appendChild(label);
+    }
 
-      if (navigator.clipboard) {
-        navigator.clipboard.writeText(code.parentElement.textContent);
-      }
+    var btn = document.createElement("button");
+    btn.className = "code-copy-btn";
+    btn.setAttribute("aria-label", "Copy code");
+    btn.innerHTML = copyIcon;
+
+    btn.addEventListener("click", function () {
+      var text = code.textContent;
+      navigator.clipboard.writeText(text).then(function () {
+        btn.innerHTML = checkIcon;
+        setTimeout(function () {
+          btn.innerHTML = copyIcon;
+        }, 2000);
+      });
     });
+
+    controls.appendChild(btn);
+    pre.appendChild(controls);
   });
 })();

config/_default/hugo.toml

@@ -26,8 +26,11 @@ publishDir = "public" # make compatible with github pages
       [markup.goldmark.extensions.passthrough]
         enable = true
         [markup.goldmark.extensions.passthrough.delimiters]
-          block = [['\\[', '\\]'], ['$$', '$$'], ['\\begin{', '\\end{']]
+          block = [['\[', '\]'], ['$$', '$$'], ['\\begin{', '\\end{']]
           inline = [['\\(', '\\)'], ['$', '$']]
 
     [markup.tableOfContents]
-        startLevel = 1
+        startLevel = 1
+
+  [markup.highlight]
+    style = "gruvbox"