style(代码配色): 全站代码换成 VS Code 的 Light+ / Dark+ 配色；if / return / #include 单独一色，变量名、\n 也有颜色了
Deploy / deploy (push) Canceled after 0s
Deploy / deploy (push) Canceled after 0s
色值照 VS Code 内置主题（light_plus / dark_plus 等）。高亮器多分了三类词：管流程的关键字、 变量、转义字符；运算符不再上色。编辑器的底色、光标、选区、行号没动。 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
xuyueandClaude Opus 5.5 committed
1 parent
b2459b5b8a
commit
a559af0aa9
3 files changed
+57
-45
No files matched your search
@@ -1,74 +1,92 @@
|
||||
/* 全站代码配色：Catppuccin，亮色 Latte、暗色 Mocha。
|
||||
色值照官方 palette.json（https://github.com/catppuccin/palette），哪类词用哪个色照官方 style guide 的
|
||||
Language Defaults：关键字 mauve、字符串 green、数字 peach、函数 blue、类型 yellow、注释 overlay2。
|
||||
/* 全站代码配色：VS Code 默认的 Light+（亮）/ Dark+（暗），色值照 VS Code 内置主题
|
||||
light_plus / light_vs / dark_plus / dark_vs 里对应 scope 的颜色。
|
||||
编辑器（CodeMirror）、正文代码块、练一练、n-code 都用 shared/highlight.ts 的 codeHighlighter
|
||||
给词打 tok-* 类名，颜色只在这里写一份。App.vue 全局引入。 */
|
||||
:root {
|
||||
--code-fg: #4c4f69; /* text */
|
||||
--code-comment: #7c7f93; /* overlay2 */
|
||||
--code-blue: #1e66f5;
|
||||
--code-green: #40a02b;
|
||||
--code-mauve: #8839ef;
|
||||
--code-peach: #fe640b;
|
||||
--code-red: #d20f39;
|
||||
--code-yellow: #df8e1d;
|
||||
--code-fg: #000000;
|
||||
--code-control: #af00db;
|
||||
--code-keyword: #0000ff;
|
||||
--code-function: #795e26;
|
||||
--code-variable: #001080;
|
||||
--code-string: #a31515;
|
||||
--code-escape: #ee0000;
|
||||
--code-number: #098658;
|
||||
--code-type: #267f99;
|
||||
--code-comment: #008000;
|
||||
--code-invalid: #cd3131;
|
||||
--code-heading: #800000;
|
||||
--code-raw: #800000;
|
||||
--code-bold: #000080;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
--code-fg: #cdd6f4;
|
||||
--code-comment: #9399b2;
|
||||
--code-blue: #89b4fa;
|
||||
--code-green: #a6e3a1;
|
||||
--code-mauve: #cba6f7;
|
||||
--code-peach: #fab387;
|
||||
--code-red: #f38ba8;
|
||||
--code-yellow: #f9e2af;
|
||||
--code-fg: #d4d4d4;
|
||||
--code-control: #c586c0;
|
||||
--code-keyword: #569cd6;
|
||||
--code-function: #dcdcaa;
|
||||
--code-variable: #9cdcfe;
|
||||
--code-string: #ce9178;
|
||||
--code-escape: #d7ba7d;
|
||||
--code-number: #b5cea8;
|
||||
--code-type: #4ec9b0;
|
||||
--code-comment: #6a9955;
|
||||
--code-invalid: #f44747;
|
||||
--code-heading: #569cd6;
|
||||
--code-raw: #ce9178;
|
||||
--code-bold: #569cd6;
|
||||
}
|
||||
|
||||
.tok-control {
|
||||
color: var(--code-control);
|
||||
}
|
||||
.tok-keyword {
|
||||
color: var(--code-mauve);
|
||||
color: var(--code-keyword);
|
||||
}
|
||||
.tok-function {
|
||||
color: var(--code-blue);
|
||||
color: var(--code-function);
|
||||
}
|
||||
.tok-variable {
|
||||
color: var(--code-variable);
|
||||
}
|
||||
.tok-string {
|
||||
color: var(--code-green);
|
||||
color: var(--code-string);
|
||||
}
|
||||
.tok-escape {
|
||||
color: var(--code-escape);
|
||||
}
|
||||
.tok-number {
|
||||
color: var(--code-peach);
|
||||
color: var(--code-number);
|
||||
}
|
||||
.tok-type {
|
||||
color: var(--code-yellow);
|
||||
color: var(--code-type);
|
||||
}
|
||||
.tok-comment {
|
||||
color: var(--code-comment);
|
||||
font-style: italic;
|
||||
}
|
||||
.tok-invalid {
|
||||
color: var(--code-red);
|
||||
color: var(--code-invalid);
|
||||
}
|
||||
|
||||
/* 以下只有 Markdown 编辑器用得到 */
|
||||
.tok-heading {
|
||||
color: var(--code-mauve);
|
||||
color: var(--code-heading);
|
||||
font-weight: bold;
|
||||
}
|
||||
.tok-strong {
|
||||
color: var(--code-peach);
|
||||
color: var(--code-bold);
|
||||
font-weight: bold;
|
||||
}
|
||||
.tok-emphasis {
|
||||
color: var(--code-yellow);
|
||||
font-style: italic;
|
||||
}
|
||||
.tok-link {
|
||||
color: var(--code-blue);
|
||||
color: var(--code-string);
|
||||
}
|
||||
.tok-monospace {
|
||||
color: var(--code-green);
|
||||
color: var(--code-raw);
|
||||
}
|
||||
.tok-quote {
|
||||
color: var(--code-yellow);
|
||||
color: var(--code-comment);
|
||||
}
|
||||
.tok-strikethrough {
|
||||
text-decoration: line-through;
|
||||
|
||||
@@ -16,19 +16,13 @@ import type { ConfigProviderProps } from "naive-ui"
|
||||
|
||||
/** 词的种类 → 类名。编辑器在 shared/themes/codeTheme.ts 里挂的也是它 */
|
||||
export const codeHighlighter = tagHighlighter([
|
||||
// `int` 这类基本类型和关键字一个颜色，自定义的类型（struct 名）才是类型色
|
||||
{
|
||||
tag: [
|
||||
t.keyword,
|
||||
t.modifier,
|
||||
t.operator,
|
||||
t.processingInstruction,
|
||||
t.escape,
|
||||
t.standard(t.typeName),
|
||||
],
|
||||
class: "tok-keyword",
|
||||
},
|
||||
// 分法照 VS Code：if / return / #include 这类管流程的词单独一色，`int` / `struct` 是普通关键字，
|
||||
// 自定义的类型（struct 名）才是类型色；运算符不上色，变量名上色
|
||||
{ tag: [t.controlKeyword, t.moduleKeyword, t.processingInstruction], class: "tok-control" },
|
||||
{ tag: [t.keyword, t.modifier, t.standard(t.typeName)], class: "tok-keyword" },
|
||||
{ tag: t.escape, class: "tok-escape" },
|
||||
{ tag: [t.function(t.variableName), t.function(t.propertyName)], class: "tok-function" },
|
||||
{ tag: [t.variableName, t.propertyName], class: "tok-variable" },
|
||||
{ tag: t.string, class: "tok-string" },
|
||||
{ tag: [t.number, t.bool, t.null, t.atom, t.self], class: "tok-number" },
|
||||
{ tag: [t.typeName, t.className, t.namespace, t.standard(t.name)], class: "tok-type" },
|
||||
|
||||
@@ -6,7 +6,7 @@ import { codeHighlighter } from "../highlight"
|
||||
/**
|
||||
* 编辑器的外观：亮 / 暗两套只管底色、光标、选区、行号这些「框」，
|
||||
* 代码的颜色两套都是 codeHighlighter 打的 tok-* 类名，跟着 html.dark 在 highlight.css 里切。
|
||||
* 框沿用原来的 smoothy（亮）和 One Dark（暗），只把代码配色换成了 Catppuccin Latte / Mocha。
|
||||
* 框沿用原来的 smoothy（亮）和 One Dark（暗），只把代码配色换成了 VS Code 的 Light+ / Dark+。
|
||||
*/
|
||||
const highlighting = syntaxHighlighting(codeHighlighter)
|
||||
|
||||
|
||||
Reference in new issue
Block a user