style(代码配色): 全站代码换成 Catppuccin 配色（亮色 Latte、暗色 Mocha），注释改成斜体

色值照官方 palette.json，哪类词用哪个色照官方 style guide：关键字紫、函数蓝、字符串绿、
数字橙、类型黄、注释灰。编辑器的底色、光标、选区、行号没动。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/shared/highlight.css

@@ -1,47 +1,48 @@
-/* 全站代码配色：亮色 Alucard、暗色 Dracula（https://draculatheme.com/spec，Alucard 是它的官方浅色版）。
+/* 全站代码配色：Catppuccin，亮色 Latte、暗色 Mocha。
+   色值照官方 palette.json（https://github.com/catppuccin/palette），哪类词用哪个色照官方 style guide 的
+   Language Defaults：关键字 mauve、字符串 green、数字 peach、函数 blue、类型 yellow、注释 overlay2。
    编辑器（CodeMirror）、正文代码块、练一练、n-code 都用 shared/highlight.ts 的 codeHighlighter
    给词打 tok-* 类名，颜色只在这里写一份。App.vue 全局引入。 */
 :root {
-  --code-fg: #1f1f1f;
+  --code-fg: #4c4f69; /* text */
-  --code-comment: #6c664b;
+  --code-comment: #7c7f93; /* overlay2 */
-  --code-cyan: #036a96;
+  --code-blue: #1e66f5;
-  --code-green: #14710a;
+  --code-green: #40a02b;
-  --code-orange: #a34d14;
+  --code-mauve: #8839ef;
-  --code-pink: #a3144d;
+  --code-peach: #fe640b;
-  --code-purple: #644ac9;
+  --code-red: #d20f39;
-  --code-red: #cb3a2a;
+  --code-yellow: #df8e1d;
-  --code-yellow: #846e15;
 }
 
 html.dark {
-  --code-fg: #f8f8f2;
+  --code-fg: #cdd6f4;
-  --code-comment: #6272a4;
+  --code-comment: #9399b2;
-  --code-cyan: #8be9fd;
+  --code-blue: #89b4fa;
-  --code-green: #50fa7b;
+  --code-green: #a6e3a1;
-  --code-orange: #ffb86c;
+  --code-mauve: #cba6f7;
-  --code-pink: #ff79c6;
+  --code-peach: #fab387;
-  --code-purple: #bd93f9;
+  --code-red: #f38ba8;
-  --code-red: #ff5555;
+  --code-yellow: #f9e2af;
-  --code-yellow: #f1fa8c;
 }
 
 .tok-keyword {
-  color: var(--code-pink);
+  color: var(--code-mauve);
 }
 .tok-function {
-  color: var(--code-green);
+  color: var(--code-blue);
 }
 .tok-string {
-  color: var(--code-yellow);
+  color: var(--code-green);
 }
 .tok-number {
-  color: var(--code-purple);
+  color: var(--code-peach);
 }
 .tok-type {
-  color: var(--code-cyan);
+  color: var(--code-yellow);
 }
 .tok-comment {
   color: var(--code-comment);
+  font-style: italic;
 }
 .tok-invalid {
   color: var(--code-red);
@@ -49,11 +50,11 @@ html.dark {
 
 /* 以下只有 Markdown 编辑器用得到 */
 .tok-heading {
-  color: var(--code-purple);
+  color: var(--code-mauve);
   font-weight: bold;
 }
 .tok-strong {
-  color: var(--code-orange);
+  color: var(--code-peach);
   font-weight: bold;
 }
 .tok-emphasis {
@@ -61,7 +62,7 @@ html.dark {
   font-style: italic;
 }
 .tok-link {
-  color: var(--code-cyan);
+  color: var(--code-blue);
 }
 .tok-monospace {
   color: var(--code-green);

apps/web/src/shared/highlight.ts

@@ -16,7 +16,7 @@ import type { ConfigProviderProps } from "naive-ui"
 
 /** 词的种类 → 类名。编辑器在 shared/themes/codeTheme.ts 里挂的也是它 */
 export const codeHighlighter = tagHighlighter([
-  // `int` 这类基本类型和关键字一个颜色（Dracula 的 storage.type），自定义的类型才是青色
+  // `int` 这类基本类型和关键字一个颜色，自定义的类型（struct 名）才是类型色
   {
     tag: [
       t.keyword,

apps/web/src/shared/themes/codeTheme.ts

@@ -6,7 +6,7 @@ import { codeHighlighter } from "../highlight"
 /**
  * 编辑器的外观：亮 / 暗两套只管底色、光标、选区、行号这些「框」，
  * 代码的颜色两套都是 codeHighlighter 打的 tok-* 类名，跟着 html.dark 在 highlight.css 里切。
- * 框沿用原来的 smoothy（亮）和 One Dark（暗），只把代码配色换成了 Alucard / Dracula。
+ * 框沿用原来的 smoothy（亮）和 One Dark（暗），只把代码配色换成了 Catppuccin Latte / Mocha。
  */
 const highlighting = syntaxHighlighting(codeHighlighter)