style(代码配色): 全站代码换成 Dracula 配色（亮色用官方浅色版 Alucard）；编辑器、题面和教程的代码块、练一练、提交详情的颜色一模一样了

原来三套配色各管一块：编辑器是 smoothy / One Dark，正文代码块和练一练是仿 GitHub，提交详情是 Naive 自带的，同一段 printf 在一课里就有两种颜色。现在静态代码也走编辑器那套 lezer 解析器，颜色只在 shared/highlight.css 写一份，highlight.js 删掉。填空题顺手修好：空会把语法搅乱，(humidity ____ 40) 被认成类型声明、humidity 染成类型色，现在空里先填上答案再解析，答案不输出。 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-13 19:49:20 +08:00
1 parent 27210eac1b
commit df3b4f0dfd
@@ -0,0 +1,107 @@
+import { syntaxHighlighting } from "@codemirror/language"
+import type { Extension } from "@codemirror/state"
+import { EditorView } from "@codemirror/view"
+import { codeHighlighter } from "../highlight"
+
+/**
+ * 编辑器的外观：亮 / 暗两套只管底色、光标、选区、行号这些「框」，
+ * 代码的颜色两套都是 codeHighlighter 打的 tok-* 类名，跟着 html.dark 在 highlight.css 里切。
+ * 框沿用原来的 smoothy（亮）和 One Dark（暗），只把代码配色换成了 Alucard / Dracula。
+ */
+const highlighting = syntaxHighlighting(codeHighlighter)
+
+const light = EditorView.theme({
+  "&": {
+    backgroundColor: "#ffffff",
+    color: "var(--code-fg)",
+  },
+  ".cm-content": { caretColor: "#000000" },
+  ".cm-cursor, .cm-dropCursor": { borderLeftColor: "#000000" },
+  "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": {
+    backgroundColor: "#FFFD0054",
+  },
+  ".cm-activeLine": { backgroundColor: "#00000008" },
+  ".cm-gutters": {
+    backgroundColor: "#ffffff",
+    borderRight: "none",
+    color: "#00000070",
+  },
+  ".cm-activeLineGutter": { backgroundColor: "#00000008" },
+  ".cm-tooltip": {
+    border: "1px solid #e0e0e0",
+    backgroundColor: "#f8f8f8",
+  },
+  ".cm-tooltip-autocomplete": {
+    "& > ul > li[aria-selected]": {
+      backgroundColor: "#e8e8e8",
+      color: "#000000",
+    },
+  },
+})
+
+const darkBackground = "#26262a",
+  highlightBackground = "#2c313a",
+  background = "#101014", // naive-ui
+  tooltipBackground = "#353a42",
+  stone = "#7d8799",
+  cursor = "#528bff"
+
+const dark = EditorView.theme(
+  {
+    "&": {
+      color: "var(--code-fg)",
+      backgroundColor: background,
+    },
+    ".cm-content": { caretColor: cursor },
+    ".cm-cursor, .cm-dropCursor": { borderLeftColor: cursor },
+    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": {
+      backgroundColor: "#3E4451",
+    },
+    ".cm-panels": { backgroundColor: darkBackground, color: "var(--code-fg)" },
+    ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
+    ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
+    ".cm-searchMatch": {
+      backgroundColor: "#72a1ff59",
+      outline: "1px solid #457dff",
+    },
+    ".cm-searchMatch.cm-searchMatch-selected": { backgroundColor: "#6199ff2f" },
+    ".cm-activeLine": { backgroundColor: "#6699ff0b" },
+    ".cm-selectionMatch": { backgroundColor: "#aafe661a" },
+    "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
+      backgroundColor: "#bad0f847",
+    },
+    ".cm-gutters": {
+      backgroundColor: background,
+      color: stone,
+      border: "none",
+    },
+    ".cm-activeLineGutter": { backgroundColor: highlightBackground },
+    ".cm-foldPlaceholder": {
+      backgroundColor: "transparent",
+      border: "none",
+      color: "#ddd",
+    },
+    ".cm-tooltip": {
+      border: "none",
+      backgroundColor: tooltipBackground,
+    },
+    ".cm-tooltip .cm-tooltip-arrow:before": {
+      borderTopColor: "transparent",
+      borderBottomColor: "transparent",
+    },
+    ".cm-tooltip .cm-tooltip-arrow:after": {
+      borderTopColor: tooltipBackground,
+      borderBottomColor: tooltipBackground,
+    },
+    ".cm-tooltip-autocomplete": {
+      "& > ul > li[aria-selected]": {
+        backgroundColor: highlightBackground,
+        color: "var(--code-fg)",
+      },
+    },
+  },
+  { dark: true },
+)
+
+export const lightCodeTheme: Extension = [light, highlighting]
+export const darkCodeTheme: Extension = [dark, highlighting]