Files
OJ2/apps/web/src/shared/highlight.css
T
xuyueandClaude Opus 5.5 60e96f311e
Deploy / deploy (push) Canceled after 0s
feat(代码配色): 代码里的全角标点(print(“你好”)、!=、全角空格)标红加波浪线;Python 的 int / str / list 一律青绿色,print 一律是函数色,"%.f" 也认了
12 万条 Python 提交里,代码里带全角标点的 1947 条全部编译出错,占 Python 编译错误的五分之一,
原来的配色下 “你好” 被认成变量名,看着和正常代码一样。

int 原来是 int(input()) 里棕色、map(int, …) 里深蓝;print 碰上 print"yes"、print(c) 会变成
关键字蓝。现在都照 VS Code。C 的解析器碰到全角标点会把后半行当成没有引号的「字符串」,
这种不算字符串,里面的全角标点照样标。

补的这几种标记合在 shared/codeMarks.ts 一处(原 formatPlaceholder.ts),编辑器和静态代码共用;
Python 解析器的补丁挪到 extensions/pythonLanguage.ts,免得 language → codeMarks → highlight 绕圈。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-13 20:27:03 +08:00

119 lines
2.7 KiB
CSS

/* 全站代码配色: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: #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-invalid-bg: rgba(205, 49, 49, 0.12);
--code-heading: #800000;
--code-raw: #800000;
--code-bold: #000080;
}
html.dark {
--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-invalid-bg: rgba(244, 71, 71, 0.18);
--code-heading: #569cd6;
--code-raw: #ce9178;
--code-bold: #569cd6;
}
.tok-control {
color: var(--code-control);
}
.tok-keyword {
color: var(--code-keyword);
}
.tok-function {
color: var(--code-function);
}
.tok-variable {
color: var(--code-variable);
}
.tok-string {
color: var(--code-string);
}
.tok-escape {
color: var(--code-escape);
}
.tok-number {
color: var(--code-number);
}
.tok-type {
color: var(--code-type);
}
.tok-comment {
color: var(--code-comment);
}
.tok-invalid {
color: var(--code-invalid);
}
/* shared/codeMarks.ts 补的几种标记。静态代码是同一个 span 上的两个类名,编辑器里是两层 span、
谁包谁不一定,所以内外两种写法都要,并且要写在上面那些 tok-* 后面 */
.tok-format,
.tok-format * {
color: var(--code-variable);
}
.tok-format-py,
.tok-format-py * {
color: var(--code-keyword);
}
.tok-builtin-type,
.tok-builtin-type * {
color: var(--code-type);
}
.tok-fullwidth,
.tok-fullwidth * {
color: var(--code-invalid);
background-color: var(--code-invalid-bg);
text-decoration: wavy underline var(--code-invalid);
text-decoration-skip-ink: none;
text-underline-offset: 3px;
}
/* 以下只有 Markdown 编辑器用得到 */
.tok-heading {
color: var(--code-heading);
font-weight: bold;
}
.tok-strong {
color: var(--code-bold);
font-weight: bold;
}
.tok-emphasis {
font-style: italic;
}
.tok-link {
color: var(--code-string);
}
.tok-monospace {
color: var(--code-raw);
}
.tok-quote {
color: var(--code-comment);
}
.tok-strikethrough {
text-decoration: line-through;
}