From a01f20473fbd5934617999ca8f9e616c75e99127 Mon Sep 17 00:00:00 2001
From: LakshmanKishore <lakshmankishore17@gmail.com>
Date: Fri, 6 Mar 2026 09:39:26 +0530
Subject: [PATCH] feat: implement CSS-variable based syntax highlighting for
 dark mode

---
 index.html |  3 +-
 script.js  | 42 ++++++++++++++--------------
 styles.css | 81 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
 3 files changed, 99 insertions(+), 27 deletions(-)

diff --git a/index.html b/index.html
index f2d98ee..11ccb04 100644
--- a/index.html
+++ b/index.html
@@ -32,7 +32,6 @@
     <!-- Updated libraries to latest versions -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.3.0/github-markdown.min.css">
-    <link rel="stylesheet" id="highlight-theme" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/emoji-toolkit@9.0.1/extras/css/joypixels.min.css">
     <link rel="stylesheet" href="styles.css">
@@ -268,4 +267,4 @@ <h5>Menu</h5>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
     <script src="script.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/script.js b/script.js
index 1aa5503..f5a176f 100644
--- a/script.js
+++ b/script.js
@@ -121,11 +121,6 @@ document.addEventListener("DOMContentLoaded", function () {
   marked.setOptions({
     ...markedOptions,
     renderer: renderer,
-    highlight: function (code, language) {
-      if (language === 'mermaid') return code;
-      const validLanguage = hljs.getLanguage(language) ? language : "plaintext";
-      return hljs.highlight(code, { language: validLanguage }).value;
-    },
   });
 
   const sampleMarkdown = `# Welcome to Markdown Viewer
@@ -145,10 +140,9 @@ document.addEventListener("DOMContentLoaded", function () {
     const sanitizedHtml = DOMPurify.sanitize(html);
     markdownPreview.innerHTML = sanitizedHtml;
     
-    // Apply syntax highlighting to code blocks
-    markdownPreview.querySelectorAll('pre code').forEach((block) => {
-        hljs.highlightElement(block);
-    });
+    // Syntax highlighting is handled automatically
+    // during the parsing phase by the marked renderer.
+    // Themes are applied instantly via CSS variables.
   }
 \`\`\`
 
@@ -302,16 +296,6 @@ This is a fully client-side application. Your content never leaves your browser
       });
       markdownPreview.innerHTML = sanitizedHtml;
 
-      markdownPreview.querySelectorAll("pre code").forEach((block) => {
-        try {
-          if (!block.classList.contains('mermaid') && !block.classList.contains('hljs')) {
-            hljs.highlightElement(block);
-          }
-        } catch (e) {
-          console.warn("Syntax highlighting failed for a code block:", e);
-        }
-      });
-
       processEmojis(markdownPreview);
       
       // Reinitialize mermaid with current theme before rendering diagrams
@@ -813,9 +797,6 @@ This is a fully client-side application. Your content never leaves your browser
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Markdown Export</title>
   <link rel="stylesheet" href="${cssTheme}">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/${
-    isDarkTheme ? "github-dark" : "github"
-  }.min.css">
   <style>
       body {
           background-color: ${isDarkTheme ? "#0d1117" : "#ffffff"};
@@ -830,6 +811,23 @@ This is a fully client-side application. Your content never leaves your browser
           background-color: ${isDarkTheme ? "#0d1117" : "#ffffff"};
           color: ${isDarkTheme ? "#c9d1d9" : "#24292e"};
       }
+
+      /* Syntax Highlighting */
+      .hljs-doctag, .hljs-keyword, .hljs-template-tag, .hljs-template-variable, .hljs-type, .hljs-variable.language_ { color: ${isDarkTheme ? "#ff7b72" : "#d73a49"}; }
+      .hljs-title, .hljs-title.class_, .hljs-title.class_.inherited__, .hljs-title.function_ { color: ${isDarkTheme ? "#d2a8ff" : "#6f42c1"}; }
+      .hljs-attr, .hljs-attribute, .hljs-literal, .hljs-meta, .hljs-number, .hljs-operator, .hljs-variable, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id { color: ${isDarkTheme ? "#79c0ff" : "#005cc5"}; }
+      .hljs-regexp, .hljs-string, .hljs-meta .hljs-string { color: ${isDarkTheme ? "#a5d6ff" : "#032f62"}; }
+      .hljs-built_in, .hljs-symbol { color: ${isDarkTheme ? "#ffa657" : "#e36209"}; }
+      .hljs-comment, .hljs-code, .hljs-formula { color: ${isDarkTheme ? "#8b949e" : "#6a737d"}; }
+      .hljs-name, .hljs-quote, .hljs-selector-tag, .hljs-selector-pseudo { color: ${isDarkTheme ? "#7ee787" : "#22863a"}; }
+      .hljs-subst { color: ${isDarkTheme ? "#c9d1d9" : "#24292e"}; }
+      .hljs-section { color: ${isDarkTheme ? "#1f6feb" : "#005cc5"}; font-weight: bold; }
+      .hljs-bullet { color: ${isDarkTheme ? "#79c0ff" : "#005cc5"}; }
+      .hljs-emphasis { font-style: italic; }
+      .hljs-strong { font-weight: bold; }
+      .hljs-addition { color: ${isDarkTheme ? "#aff5b4" : "#22863a"}; background-color: ${isDarkTheme ? "#033a16" : "#f0fff4"}; }
+      .hljs-deletion { color: ${isDarkTheme ? "#ffdcd7" : "#b31d28"}; background-color: ${isDarkTheme ? "#67060c" : "#ffeef0"}; }
+
       @media (max-width: 767px) {
           .markdown-body {
               padding: 15px;
diff --git a/styles.css b/styles.css
index 8b784d8..41916a1 100644
--- a/styles.css
+++ b/styles.css
@@ -413,8 +413,82 @@ a:focus {
   background-color: var(--code-bg);
 }
 
-[data-theme="dark"] .hljs {
-  color: #e8eaed;
+/* Syntax Highlighting Mapping to GitHub Variables */
+.hljs {
+  color: var(--color-fg-default);
+}
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+  color: var(--color-prettylights-syntax-keyword);
+}
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+  color: var(--color-prettylights-syntax-entity);
+}
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+  color: var(--color-prettylights-syntax-constant);
+}
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+  color: var(--color-prettylights-syntax-string);
+}
+.hljs-built_in,
+.hljs-symbol {
+  color: var(--color-prettylights-syntax-variable);
+}
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+  color: var(--color-prettylights-syntax-comment);
+}
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+  color: var(--color-prettylights-syntax-entity-tag);
+}
+.hljs-subst {
+  color: var(--color-fg-default);
+}
+.hljs-section {
+  color: var(--color-prettylights-syntax-markup-heading);
+  font-weight: bold;
+}
+.hljs-bullet {
+  color: var(--color-prettylights-syntax-constant);
+}
+.hljs-emphasis {
+  color: var(--color-fg-default);
+  font-style: italic;
+}
+.hljs-strong {
+  color: var(--color-fg-default);
+  font-weight: bold;
+}
+.hljs-addition {
+  color: var(--color-prettylights-syntax-markup-inserted-text);
+  background-color: var(--color-prettylights-syntax-markup-inserted-bg);
+}
+.hljs-deletion {
+  color: var(--color-prettylights-syntax-markup-deleted-text);
+  background-color: var(--color-prettylights-syntax-markup-deleted-bg);
 }
 
 .stats-container {
@@ -1104,4 +1178,5 @@ a:focus {
 
 .mermaid-modal-controls .mermaid-toolbar-btn {
   opacity: 1;
-}
\ No newline at end of file
+}
+