From a9cd05e960793b653fcfc25eb8e77cf2da4fe87c Mon Sep 17 00:00:00 2001
From: tianma-if <yingwaizhiying@gmail.com>
Date: Sat, 12 Sep 2026 00:07:05 +0800
Subject: [PATCH] feat(web): highlight Markdown source and switch themes from
 the toolbar

Light auto theme now colors headings, marks, quotes, and links so source
mode is readable. The editor toolbar can pick the same Markdown themes as
settings.
---
 apps/web/package.json                         |  1 +
 apps/web/src/components/EditorToolbar.tsx     | 21 +++++++++++-
 apps/web/src/components/ThemeProvider.tsx     |  8 +++++
 .../editor/MarkdownSourceEditor.tsx           | 17 +++++-----
 apps/web/src/lib/markdown-source-highlight.ts | 32 +++++++++++++++++++
 apps/web/src/lib/markdown-theme.test.mjs      | 28 ++++++++++++++++
 bun.lock                                      |  3 +-
 packages/shared/src/i18n/en-US.ts             |  1 +
 packages/shared/src/i18n/zh-CN.ts             |  1 +
 9 files changed, 102 insertions(+), 10 deletions(-)
 create mode 100644 apps/web/src/lib/markdown-source-highlight.ts

diff --git a/apps/web/package.json b/apps/web/package.json
index 700e4dc0..b9975f8f 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -6,6 +6,7 @@
   "dependencies": {
     "@antv/x6": "3.1.8",
     "@codemirror/lang-markdown": "^6.5.2",
+    "@lezer/highlight": "^1.2.3",
     "@edgeever/client": "workspace:*",
     "@floating-ui/react-dom": "^2.1.8",
     "@fontsource-variable/noto-sans-sc": "^5.2.8",
diff --git a/apps/web/src/components/EditorToolbar.tsx b/apps/web/src/components/EditorToolbar.tsx
index 697919cb..82b2038d 100644
--- a/apps/web/src/components/EditorToolbar.tsx
+++ b/apps/web/src/components/EditorToolbar.tsx
@@ -35,6 +35,7 @@ import {
 import { CODE_BLOCK_LANGUAGES, getCodeBlockLanguageValue } from "@/lib/code-block";
 import { EditorTableMenu } from "@/components/EditorTableMenu";
 import { wrapIndentedParagraphInList } from "@/lib/editor-shortcuts";
+import { MARKDOWN_THEME_PREFERENCES, useMarkdownTheme } from "@/components/ThemeProvider";
 
 const EditorToolbarButton = ({
   active = false,
@@ -159,6 +160,7 @@ export const EditorToolbar = ({
   externalLinkActive?: boolean;
 }) => {
   const { t } = useTranslation();
+  const { markdownThemePreference, setMarkdownTheme } = useMarkdownTheme();
   const controlsRef = useRef<HTMLDivElement>(null);
   const [expanded, setExpanded] = useState(readEditorToolbarExpandedPreference);
   const [hasOverflow, setHasOverflow] = useState(false);
@@ -366,7 +368,24 @@ export const EditorToolbar = ({
             </>
           )}
           {markdownMode ? (
-            <span className="shrink-0 text-xs text-slate-500">{t("editorToolbar.markdownSource")}</span>
+            <Select
+              value={markdownThemePreference}
+              onValueChange={(value) => setMarkdownTheme(value as typeof markdownThemePreference)}
+            >
+              <SelectTrigger
+                aria-label={t("editorToolbar.markdownTheme")}
+                className="h-8 w-[11.5rem] shrink-0 whitespace-nowrap border-slate-200 bg-card text-xs text-slate-800 [&>span]:truncate [&>span]:whitespace-nowrap"
+              >
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent className="bg-card border border-slate-200 rounded-md py-1 shadow-md">
+                {MARKDOWN_THEME_PREFERENCES.map((theme) => (
+                  <SelectItem key={theme} value={theme}>
+                    {t(`settings.markdownThemes.${theme}`)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           ) : (
             <>
           <Select
diff --git a/apps/web/src/components/ThemeProvider.tsx b/apps/web/src/components/ThemeProvider.tsx
index 59ba2ca5..d8bcb458 100644
--- a/apps/web/src/components/ThemeProvider.tsx
+++ b/apps/web/src/components/ThemeProvider.tsx
@@ -87,6 +87,14 @@ export const MARKDOWN_THEME_NAMES = [
 export type MarkdownThemeName = (typeof MARKDOWN_THEME_NAMES)[number];
 export const MARKDOWN_THEME_PREFERENCES = ["auto", ...MARKDOWN_THEME_NAMES] as const;
 export type MarkdownThemePreference = (typeof MARKDOWN_THEME_PREFERENCES)[number];
+export const MARKDOWN_LIGHT_THEME_NAMES = [
+  "github-light",
+  "solarized-light",
+  "xcode-light",
+  "duotone-light",
+] as const satisfies readonly MarkdownThemeName[];
+export const isMarkdownLightTheme = (theme: MarkdownThemeName): boolean =>
+  (MARKDOWN_LIGHT_THEME_NAMES as readonly MarkdownThemeName[]).includes(theme);
 
 export const EDITOR_THEME_NAMES = [
   "default",
diff --git a/apps/web/src/components/editor/MarkdownSourceEditor.tsx b/apps/web/src/components/editor/MarkdownSourceEditor.tsx
index 2239a764..e8ef5a4e 100644
--- a/apps/web/src/components/editor/MarkdownSourceEditor.tsx
+++ b/apps/web/src/components/editor/MarkdownSourceEditor.tsx
@@ -6,7 +6,7 @@ import CodeMirror, {
 } from "@uiw/react-codemirror";
 import { markdown } from "@codemirror/lang-markdown";
 import {
-  githubLight,
+  githubLightInit,
   githubDark,
   atomone,
   tokyoNight,
@@ -14,17 +14,18 @@ import {
   dracula,
   nord,
   monokai,
-  solarizedLight,
+  solarizedLightInit,
   solarizedDark,
   vscodeDark,
-  xcodeLight,
+  xcodeLightInit,
   sublime,
-  duotoneLight,
+  duotoneLightInit,
   duotoneDark,
   gruvboxDark,
 } from "@uiw/codemirror-themes-all";
 import type { MarkdownThemeName } from "../ThemeProvider";
 import { getAiSlashCommandStart } from "@/lib/editor-shortcuts";
+import { lightMarkdownHighlightStyles } from "@/lib/markdown-source-highlight";
 import { cn } from "@/lib/utils";
 
 export interface MarkdownSourceEditorRef {
@@ -49,7 +50,7 @@ export interface MarkdownSourceEditorProps {
 }
 
 export const CODE_MIRROR_THEME_MAP: Record<MarkdownThemeName, Extension> = {
-  "github-light": githubLight,
+  "github-light": githubLightInit({ styles: lightMarkdownHighlightStyles }),
   "github-dark": githubDark,
   "one-dark": atomone,
   "tokyo-night": tokyoNight,
@@ -57,12 +58,12 @@ export const CODE_MIRROR_THEME_MAP: Record<MarkdownThemeName, Extension> = {
   dracula,
   nord,
   monokai,
-  "solarized-light": solarizedLight,
+  "solarized-light": solarizedLightInit({ styles: lightMarkdownHighlightStyles }),
   "solarized-dark": solarizedDark,
   "vscode-dark": vscodeDark,
-  "xcode-light": xcodeLight,
+  "xcode-light": xcodeLightInit({ styles: lightMarkdownHighlightStyles }),
   sublime,
-  "duotone-light": duotoneLight,
+  "duotone-light": duotoneLightInit({ styles: lightMarkdownHighlightStyles }),
   "duotone-dark": duotoneDark,
   "gruvbox-dark": gruvboxDark,
 };
diff --git a/apps/web/src/lib/markdown-source-highlight.ts b/apps/web/src/lib/markdown-source-highlight.ts
new file mode 100644
index 00000000..65647f67
--- /dev/null
+++ b/apps/web/src/lib/markdown-source-highlight.ts
@@ -0,0 +1,32 @@
+import { tags as t } from "@lezer/highlight";
+
+/**
+ * Appended to light CodeMirror themes so Markdown source tokens stay
+ * distinct. Later rules in the same HighlightStyle win, which is why these
+ * go through `*Init({ styles })` instead of a second highlighter.
+ */
+export const lightMarkdownHighlightStyles = [
+  { tag: t.heading1, color: "#0550ae", fontWeight: "700" },
+  { tag: t.heading2, color: "#0550ae", fontWeight: "700" },
+  { tag: t.heading3, color: "#0a3069", fontWeight: "700" },
+  { tag: t.heading4, color: "#0f766e", fontWeight: "700" },
+  { tag: t.heading5, color: "#0f766e", fontWeight: "700" },
+  { tag: t.heading6, color: "#0f766e", fontWeight: "700" },
+  { tag: t.heading, color: "#0550ae", fontWeight: "700" },
+  { tag: t.processingInstruction, color: "#64748b" },
+  { tag: t.meta, color: "#64748b" },
+  { tag: t.comment, color: "#64748b" },
+  { tag: t.strong, color: "#0f172a", fontWeight: "700" },
+  { tag: t.emphasis, color: "#9f1239", fontStyle: "italic" },
+  { tag: t.strikethrough, color: "#64748b", textDecoration: "line-through" },
+  { tag: t.link, color: "#0969da" },
+  { tag: t.url, color: "#0969da", textDecoration: "underline" },
+  { tag: t.monospace, color: "#be185d" },
+  { tag: t.quote, color: "#15803d" },
+  { tag: t.atom, color: "#0f766e", fontWeight: "700" },
+  { tag: t.contentSeparator, color: "#94a3b8" },
+  { tag: t.labelName, color: "#7c3aed" },
+  { tag: t.string, color: "#0f766e" },
+  { tag: t.escape, color: "#b45309" },
+  { tag: t.character, color: "#b45309" },
+];
diff --git a/apps/web/src/lib/markdown-theme.test.mjs b/apps/web/src/lib/markdown-theme.test.mjs
index 9897d4bd..9dfe8535 100644
--- a/apps/web/src/lib/markdown-theme.test.mjs
+++ b/apps/web/src/lib/markdown-theme.test.mjs
@@ -1,11 +1,15 @@
 import { describe, expect, test } from "bun:test";
+import { readFileSync } from "node:fs";
 import {
   getStoredMarkdownTheme,
+  isMarkdownLightTheme,
+  MARKDOWN_LIGHT_THEME_NAMES,
   MARKDOWN_THEME_NAMES,
   MARKDOWN_THEME_PREFERENCES,
   resolveMarkdownTheme,
 } from "../components/ThemeProvider";
 import { CODE_MIRROR_THEME_MAP } from "../components/editor/MarkdownSourceEditor";
+import { lightMarkdownHighlightStyles } from "./markdown-source-highlight";
 
 describe("markdown theme contracts", () => {
   test("automatic Markdown themes follow the resolved appearance", () => {
@@ -34,4 +38,28 @@ describe("markdown theme contracts", () => {
       expect(extension).toBeDefined();
     }
   });
+
+  test("light markdown themes receive an extra syntax highlight layer", () => {
+    const editorSource = readFileSync(new URL("../components/editor/MarkdownSourceEditor.tsx", import.meta.url), "utf8");
+    expect(lightMarkdownHighlightStyles.length).toBeGreaterThan(0);
+    expect(editorSource).toContain("lightMarkdownHighlightStyles");
+    for (const theme of MARKDOWN_LIGHT_THEME_NAMES) {
+      expect(MARKDOWN_THEME_NAMES).toContain(theme);
+      expect(isMarkdownLightTheme(theme)).toBe(true);
+      expect(CODE_MIRROR_THEME_MAP[theme]).toBeDefined();
+      expect(editorSource).toContain(`"${theme}":`);
+    }
+    expect(isMarkdownLightTheme("tokyo-night")).toBe(false);
+    expect(editorSource).toContain("githubLightInit({ styles: lightMarkdownHighlightStyles })");
+    expect(editorSource).toContain("xcodeLightInit({ styles: lightMarkdownHighlightStyles })");
+  });
+
+  test("the editor toolbar can switch Markdown source themes", () => {
+    const toolbar = readFileSync(new URL("../components/EditorToolbar.tsx", import.meta.url), "utf8");
+    expect(toolbar).toContain("useMarkdownTheme");
+    expect(toolbar).toContain("MARKDOWN_THEME_PREFERENCES");
+    expect(toolbar).toContain("markdownThemePreference");
+    expect(toolbar).toContain('t("editorToolbar.markdownTheme")');
+    expect(toolbar).not.toContain('t("editorToolbar.markdownSource")');
+  });
 });
diff --git a/bun.lock b/bun.lock
index f171a748..0874babf 100644
--- a/bun.lock
+++ b/bun.lock
@@ -95,7 +95,7 @@
     },
     "apps/desktop": {
       "name": "@edgeever/desktop",
-      "version": "1.59.0",
+      "version": "1.67.0",
       "dependencies": {
         "@edgeever/public-network": "workspace:*",
         "croner": "^10.0.1",
@@ -217,6 +217,7 @@
         "@edgeever/client": "workspace:*",
         "@floating-ui/react-dom": "^2.1.8",
         "@fontsource-variable/noto-sans-sc": "^5.2.8",
+        "@lezer/highlight": "^1.2.3",
         "@tiptap/extension-code-block-lowlight": "3.31.0",
         "@tiptap/pm": "3.31.0",
         "@uiw/codemirror-themes-all": "^4.25.11",
diff --git a/packages/shared/src/i18n/en-US.ts b/packages/shared/src/i18n/en-US.ts
index ed7fb52f..45f89183 100644
--- a/packages/shared/src/i18n/en-US.ts
+++ b/packages/shared/src/i18n/en-US.ts
@@ -1879,6 +1879,7 @@ export const enUS = {
     markdown: "Switch to Markdown source",
     richText: "Switch to rich text",
     markdownSource: "Markdown source",
+    markdownTheme: "Markdown source theme",
     switchToMarkdown: "Switch to Markdown mode",
     switchToRichText: "Switch to rich text mode",
     attachment: "Upload attachment",
diff --git a/packages/shared/src/i18n/zh-CN.ts b/packages/shared/src/i18n/zh-CN.ts
index 49b95e7e..3ede294c 100644
--- a/packages/shared/src/i18n/zh-CN.ts
+++ b/packages/shared/src/i18n/zh-CN.ts
@@ -1877,6 +1877,7 @@ export const zhCN = {
     markdown: "切换到 Markdown 源码",
     richText: "切换到富文本编辑",
     markdownSource: "Markdown 源码",
+    markdownTheme: "Markdown 源码主题",
     switchToMarkdown: "切换到 Markdown 模式",
     switchToRichText: "切换到富文本模式",
     attachment: "上传附件",