Merge pull request #9 from santoshxshrestha/hilight

feat: highlighting

Author: vimlinuz

static/client.js

@@ -7,6 +7,26 @@ function setThemeIcon(theme) {
       : '<i class="fa-solid fa-moon"></i>';
 }
 
+function highlightBlocks(root = document) {
+  if (!window.hljs) return;
+  root.querySelectorAll("pre code").forEach((block) => {
+    hljs.highlightElement(block);
+  });
+}
+
+function syncHighlightTheme(theme) {
+  const dark = document.getElementById("hljs-theme-dark");
+  const light = document.getElementById("hljs-theme-light");
+  if (!dark || !light) return;
+  if (theme === "light") {
+    dark.disabled = true;
+    light.disabled = false;
+  } else {
+    dark.disabled = false;
+    light.disabled = true;
+  }
+}
+
 function toggleTheme() {
   const html = document.documentElement;
   const isLight = html.getAttribute("data-theme") === "light";
@@ -15,10 +35,12 @@ function toggleTheme() {
     html.removeAttribute("data-theme");
     localStorage.setItem("theme", "dark");
     setThemeIcon("dark");
+    syncHighlightTheme("dark");
   } else {
     html.setAttribute("data-theme", "light");
     localStorage.setItem("theme", "light");
     setThemeIcon("light");
+    syncHighlightTheme("light");
   }
 }
 
@@ -30,9 +52,13 @@ document.addEventListener("DOMContentLoaded", function () {
   if (savedTheme === "light") {
     html.setAttribute("data-theme", "light");
     setThemeIcon("light");
+    syncHighlightTheme("light");
   } else {
     setThemeIcon("dark");
+    syncHighlightTheme("dark");
   }
+
+  highlightBlocks();
 });
 
 // Add smooth scrolling for anchor links
@@ -60,6 +86,7 @@ ws.onmessage = (event) => {
   const date = new Date();
   console.log(`updating content: ${date.toLocaleTimeString()}`);
   content.innerHTML = event.data;
+  highlightBlocks(content);
 };
 
 ws.onclose = () => console.log("closed");

static/global.css

@@ -133,7 +133,7 @@ code {
 
 pre {
   background: var(--code-bg);
-  padding: 16px;
+  padding: 2px;
   overflow: auto;
   border-radius: 6px;
   color: var(--code-color);

templates/main.html

@@ -10,6 +10,31 @@
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     />
+    <link
+      id="hljs-theme-dark"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css"
+      integrity="sha512-rO+olRTkcf304DQBxSWxln8JXCzTHlKnIdnMUwYvQa9/Jd4cQaNkItIUj6Z4nvW1dqK0SKXLbn9h4KwZTNtAyw=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link
+      id="hljs-theme-light"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github.min.css"
+      integrity="sha512-0aPQyyeZrWj9sCA46UlmWgKOP0mUipLQ6OZXu8l4IcAmD2u31EPEy9VcIMvl7SoAaKe8bLXZhYoMaE/in+gcgA=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+      disabled
+    />
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"
+      integrity="sha512-EBLzUL8XLl+va/zAsmXwS7Z2B1F9HUHkZwyS/VKwh3S7T/U0nF4BaU29EP/ZSf6zgiIxYAnKLu6bJ8dqpmX5uw=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+      defer
+    ></script>
+
     <title>{{ title }} - mdwatch</title>
     <style>
       {{ style | safe }}