try to align

frontend/index.html

@@ -703,17 +703,34 @@
             to { opacity: 1; }
         }
         
-        /* Syntax highlight colors using theme variables */
+        /*
-        .syntax-overlay .md-heading { color: var(--accent-primary); font-weight: 600; }
+         * Syntax highlight colors — COLOR-ONLY (issue #212).
-        .syntax-overlay .md-bold { color: var(--text-primary); font-weight: 700; }
+         *
-        .syntax-overlay .md-italic { color: var(--text-secondary); font-style: italic; }
+         * Why no font-weight or font-style?
-        .syntax-overlay .md-code { color: var(--accent-secondary, var(--accent-primary)); background: var(--bg-tertiary); border-radius: 2px; }
+         *   The overlay sits on top of a transparent <textarea>. Macs render
-        .syntax-overlay .md-link { color: var(--link-color, var(--accent-primary)); }
+         *   bold/italic monospace glyphs (Monaco, Menlo) with slightly
-        .syntax-overlay .md-link-url { color: var(--text-tertiary); }
+         *   different advance widths than regular glyphs, which shifts the
-        .syntax-overlay .md-list { color: var(--accent-primary); }
+         *   overlay characters out of alignment with the textarea caret.
-        .syntax-overlay .md-blockquote { color: var(--text-tertiary); font-style: italic; }
+         *   Color-only highlighting (Cursor / One Dark Pro / Monokai style)
-        .syntax-overlay .md-hr { color: var(--border-primary); }
+         *   keeps every glyph at the same width and the caret perfectly
-        .syntax-overlay .md-wikilink { color: var(--link-internal, var(--accent-primary)); }
+         *   aligned on every platform.
+         *
+         * Each token uses a dedicated CSS variable (--syntax-*) with a
+         * fallback chained to an existing semantic theme token, so all
+         * existing themes keep working with sensible defaults; individual
+         * themes can override --syntax-bold/--syntax-italic/--syntax-code
+         * for fine-tuning.
+         */
+        .syntax-overlay .md-heading   { color: var(--syntax-heading, var(--accent-primary)); }
+        .syntax-overlay .md-bold      { color: var(--syntax-bold, var(--warning)); }
+        .syntax-overlay .md-italic    { color: var(--syntax-italic, var(--accent-primary)); }
+        .syntax-overlay .md-code      { color: var(--syntax-code, var(--error)); background: var(--bg-tertiary); border-radius: 2px; }
+        .syntax-overlay .md-link      { color: var(--syntax-link, var(--link-color, var(--accent-primary))); }
+        .syntax-overlay .md-link-url  { color: var(--text-tertiary); }
+        .syntax-overlay .md-list      { color: var(--syntax-list, var(--accent-primary)); }
+        .syntax-overlay .md-blockquote{ color: var(--syntax-blockquote, var(--text-tertiary)); }
+        .syntax-overlay .md-hr        { color: var(--border-primary); }
+        .syntax-overlay .md-wikilink  { color: var(--syntax-wikilink, var(--link-internal, var(--accent-primary))); }
         .syntax-overlay .md-frontmatter { color: var(--text-tertiary); }
         .syntax-overlay .md-codeblock { color: var(--text-secondary); background: var(--bg-tertiary); }
         

themes/dark.css

@@ -26,7 +26,17 @@
   --success: #34d399;
   --error: #f87171;
   --warning: #fbbf24;
-  
+
+  /* Markdown syntax-highlight colors (color-only, no font-weight / italic) */
+  --syntax-heading: #60a5fa; /* blue */
+  --syntax-bold:    #fbbf24; /* amber/yellow — Cursor-style */
+  --syntax-italic:  #c084fc; /* violet */
+  --syntax-code:    #f87171; /* salmon red */
+  --syntax-link:    #60a5fa;
+  --syntax-list:    #f59e0b; /* warm orange — stands out at line start */
+  --syntax-wikilink:#a5b4fc; /* indigo */
+  --syntax-blockquote: #9ca3af; /* muted gray */
+
   /* Shadows */
   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);

themes/light.css

@@ -26,7 +26,17 @@
   --success: #10b981;
   --error: #ef4444;
   --warning: #f59e0b;
-  
+
+  /* Markdown syntax-highlight colors (color-only, no font-weight / italic) */
+  --syntax-heading: #2563eb; /* deep blue */
+  --syntax-bold:    #b45309; /* deep amber — readable on white */
+  --syntax-italic:  #7c3aed; /* deep violet */
+  --syntax-code:    #be123c; /* crimson */
+  --syntax-link:    #2563eb;
+  --syntax-list:    #c2410c; /* burnt orange */
+  --syntax-wikilink:#4f46e5; /* indigo */
+  --syntax-blockquote: #6b7280; /* slate */
+
   /* Shadows */
   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);