From 3b04afc27506cd6245e62763d3a11a3a23cffafc Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Tue, 13 Oct 2026 20:18:29 +0800
Subject: [PATCH] =?UTF-8?q?style(=E4=BB=A3=E7=A0=81=E9=85=8D=E8=89=B2):=20?=
 =?UTF-8?q?printf=20=E9=87=8C=E7=9A=84=20%d=E3=80=81%.2f=20=E5=92=8C=20Pyt?=
 =?UTF-8?q?hon=20f-string=20=E7=9A=84=20{=20}=20=E6=9C=89=E4=BA=86?=
 =?UTF-8?q?=E8=87=AA=E5=B7=B1=E7=9A=84=E9=A2=9C=E8=89=B2=EF=BC=9BPython=20?=
 =?UTF-8?q?=E7=9A=84=20from=20/=20as=20/=20with=20=E5=92=8C=20import=20?=
 =?UTF-8?q?=E4=B8=80=E4=B8=AA=E9=A2=9C=E8=89=B2=EF=BC=8C=E8=B7=9F=20VS=20C?=
 =?UTF-8?q?ode=20=E4=B8=80=E6=A0=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

lezer 把整个字符串当一个词，占位符另外扫一遍（shared/formatPlaceholder.ts），编辑器挂装饰、
静态代码拆 span，用同一份正则。Python 解析器补了几条 styleTags，编辑器和静态代码共用。
CodeEditor.vue 原来自己抄了一份语言选择，改成用 languageExtension。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/shared/components/CodeEditor.vue |  9 +---
 .../shared/extensions/formatPlaceholder.ts    | 45 +++++++++++++++++++
 apps/web/src/shared/extensions/language.ts    | 24 +++++++++-
 apps/web/src/shared/formatPlaceholder.ts      | 27 +++++++++++
 apps/web/src/shared/highlight.css             | 13 ++++++
 apps/web/src/shared/highlight.ts              | 30 ++++++++++---
 6 files changed, 134 insertions(+), 14 deletions(-)
 create mode 100644 apps/web/src/shared/extensions/formatPlaceholder.ts
 create mode 100644 apps/web/src/shared/formatPlaceholder.ts

diff --git a/apps/web/src/shared/components/CodeEditor.vue b/apps/web/src/shared/components/CodeEditor.vue
index dba2f45..d62d901 100644
--- a/apps/web/src/shared/components/CodeEditor.vue
+++ b/apps/web/src/shared/components/CodeEditor.vue
@@ -1,7 +1,4 @@
 <script lang="ts" setup>
-import { cpp } from "@codemirror/lang-cpp"
-import { python } from "@codemirror/lang-python"
-import { sql, SQLite } from "@codemirror/lang-sql"
 import { bracketMatching } from "@codemirror/language"
 import CodeMirror from "./CodeMirror.vue"
 import type { Extension } from "@codemirror/state"
@@ -10,6 +7,7 @@ import type { LANGUAGE } from "utils/types"
 import { darkCodeTheme, lightCodeTheme } from "../themes/codeTheme"
 import { styleTheme } from "shared/extensions/baseTheme"
 import { enhanceCompletion } from "shared/extensions/autocompletion"
+import { languageExtension } from "shared/extensions/language"
 
 interface Props {
   language?: LANGUAGE
@@ -33,10 +31,7 @@ const code = defineModel<string>("value")
 
 const isDark = useDark()
 
-const langExtension = computed(() => {
-  if (language === "SQL") return sql({ dialect: SQLite, upperCaseKeywords: true })
-  return language === "Python" ? python() : cpp()
-})
+const langExtension = computed(() => languageExtension(language))
 
 const extensions = computed(() => [
   styleTheme,
diff --git a/apps/web/src/shared/extensions/formatPlaceholder.ts b/apps/web/src/shared/extensions/formatPlaceholder.ts
new file mode 100644
index 0000000..93bf9c7
--- /dev/null
+++ b/apps/web/src/shared/extensions/formatPlaceholder.ts
@@ -0,0 +1,45 @@
+import { syntaxTree } from "@codemirror/language"
+import { RangeSetBuilder, type Extension } from "@codemirror/state"
+import { Decoration, type DecorationSet, type EditorView, ViewPlugin } from "@codemirror/view"
+import { FORMAT_CLASS, type FormatFamily, formatSpans } from "../formatPlaceholder"
+
+/** 编辑器里给字符串中的 %d 这类占位符上色，正则见 shared/formatPlaceholder.ts。只扫看得见的部分 */
+export function formatPlaceholders(family: FormatFamily): Extension {
+  const mark = Decoration.mark({ class: FORMAT_CLASS[family] })
+
+  function build(view: EditorView): DecorationSet {
+    const builder = new RangeSetBuilder<Decoration>()
+    let last = 0
+    for (const { from, to } of view.visibleRanges) {
+      syntaxTree(view.state).iterate({
+        from,
+        to,
+        enter: (node) => {
+          if (node.name !== "String" && node.name !== "FormatString") return
+          // 同一个字符串跨两段可见区（中间折叠了）时只加一次，builder 要求从前往后
+          if (node.from >= last) {
+            const text = view.state.doc.sliceString(node.from, node.to)
+            for (const s of formatSpans(text, family)) {
+              builder.add(node.from + s.from, node.from + s.to, mark)
+            }
+            last = node.to
+          }
+          return false
+        },
+      })
+    }
+    return builder.finish()
+  }
+
+  return ViewPlugin.define(
+    (view) => ({
+      decorations: build(view),
+      update(u) {
+        if (u.docChanged || u.viewportChanged || syntaxTree(u.startState) !== syntaxTree(u.state)) {
+          this.decorations = build(u.view)
+        }
+      },
+    }),
+    { decorations: (v) => v.decorations },
+  )
+}
diff --git a/apps/web/src/shared/extensions/language.ts b/apps/web/src/shared/extensions/language.ts
index 0479d1b..a503c44 100644
--- a/apps/web/src/shared/extensions/language.ts
+++ b/apps/web/src/shared/extensions/language.ts
@@ -1,8 +1,25 @@
 import { cpp } from "@codemirror/lang-cpp"
-import { python } from "@codemirror/lang-python"
+import { python, pythonLanguage } from "@codemirror/lang-python"
 import { sql, SQLite } from "@codemirror/lang-sql"
+import { LanguageSupport } from "@codemirror/language"
 import type { Extension } from "@codemirror/state"
+import { styleTags, tags as t } from "@lezer/highlight"
 import type { LANGUAGE } from "utils/types"
+import { formatPlaceholders } from "./formatPlaceholder"
+
+/**
+ * Python 的解析器在上色上补几处，向 VS Code 看齐：`from` / `as` / `with` 和 `if`、`import` 一样算管流程
+ * 的词（lezer 把 `from` 和 `def` 归成一类）；f-string 的 `{ }` 和 `:.2f` 一样是格式占位符的颜色。
+ * 静态代码（shared/highlight.ts）也用这一份，编辑器和题面的颜色才一样。
+ */
+export const ojPythonLanguage = pythonLanguage.configure({
+  props: [
+    styleTags({
+      "from as with": t.controlKeyword,
+      "FormatReplacement/{ FormatReplacement/} FormatSpec/:": t.modifier,
+    }),
+  ],
+})
 
 /**
  * 语言对应的高亮扩展。学生端和教师端共用同一份（两边都是题目页上的 SyncCodeEditor） ——
@@ -12,5 +29,8 @@ import type { LANGUAGE } from "utils/types"
  */
 export function languageExtension(language: LANGUAGE): Extension {
   if (language === "SQL") return sql({ dialect: SQLite, upperCaseKeywords: true })
-  return language === "Python" ? python() : cpp()
+  if (language === "Python") {
+    return [new LanguageSupport(ojPythonLanguage, python().support), formatPlaceholders("python")]
+  }
+  return [cpp(), formatPlaceholders("c")]
 }
diff --git a/apps/web/src/shared/formatPlaceholder.ts b/apps/web/src/shared/formatPlaceholder.ts
new file mode 100644
index 0000000..7a6acf6
--- /dev/null
+++ b/apps/web/src/shared/formatPlaceholder.ts
@@ -0,0 +1,27 @@
+/**
+ * 字符串里的格式占位符：printf 的 %d、%.2f、%%，Python 的 "%d 个" % n。
+ * lezer 把整个字符串当一个词，不分出占位符，所以另外扫一遍。静态代码在 shared/highlight.ts 里拆，
+ * 编辑器在 shared/extensions/formatPlaceholder.ts 里挂装饰，两边用这一份正则。
+ *
+ * 正则和颜色照 VS Code 的语法文件：C 是 constant.other.placeholder（变量色），
+ * Python 是 constant.character.format.placeholder（关键字色），所以两种语言类名不同。
+ */
+export type FormatFamily = "c" | "python"
+
+const PATTERNS: Record<FormatFamily, RegExp> = {
+  c: /%(\d+\$)?[#0\- +']*(-?\d+|\*)?(\.(-?\d+|\*)?)?(hh|h|ll|l|j|t|z|L)?[diouxXeEfFgGaAcspn%]/g,
+  python: /%(\([\w\s]*\))?[-+#0 ]*(\d+|\*)?(\.(\d+|\*))?[hlL]?[diouxXeEfFgGcrsa%]/g,
+}
+
+export const FORMAT_CLASS: Record<FormatFamily, string> = {
+  c: "tok-format",
+  python: "tok-format-py",
+}
+
+/** 字符串里每个占位符的位置（相对 text 开头） */
+export function formatSpans(text: string, family: FormatFamily): { from: number; to: number }[] {
+  return [...text.matchAll(PATTERNS[family])].map((m) => ({
+    from: m.index,
+    to: m.index + m[0].length,
+  }))
+}
diff --git a/apps/web/src/shared/highlight.css b/apps/web/src/shared/highlight.css
index f110705..4052f58 100644
--- a/apps/web/src/shared/highlight.css
+++ b/apps/web/src/shared/highlight.css
@@ -67,6 +67,19 @@ html.dark {
   color: var(--code-invalid);
 }
 
+/* 字符串里的 %d，见 shared/formatPlaceholder.ts。静态代码是同一个 span 上的两个类名，
+   编辑器里是两层 span、谁包谁不一定，所以三种写法都要 */
+.tok-format,
+.tok-format .tok-string,
+.tok-string .tok-format {
+  color: var(--code-variable);
+}
+.tok-format-py,
+.tok-format-py .tok-string,
+.tok-string .tok-format-py {
+  color: var(--code-keyword);
+}
+
 /* 以下只有 Markdown 编辑器用得到 */
 .tok-heading {
   color: var(--code-heading);
diff --git a/apps/web/src/shared/highlight.ts b/apps/web/src/shared/highlight.ts
index c2c431d..4649dbc 100644
--- a/apps/web/src/shared/highlight.ts
+++ b/apps/web/src/shared/highlight.ts
@@ -9,10 +9,11 @@
  * 只认判题机认的几种语言，别的语言和不标语言的代码块按原文显示。
  */
 import { cppLanguage } from "@codemirror/lang-cpp"
-import { pythonLanguage } from "@codemirror/lang-python"
 import { SQLite } from "@codemirror/lang-sql"
 import { highlightCode, tagHighlighter, tags as t } from "@lezer/highlight"
 import type { ConfigProviderProps } from "naive-ui"
+import { ojPythonLanguage } from "./extensions/language"
+import { FORMAT_CLASS, type FormatFamily, formatSpans } from "./formatPlaceholder"
 
 /** 词的种类 → 类名。编辑器在 shared/themes/codeTheme.ts 里挂的也是它 */
 export const codeHighlighter = tagHighlighter([
@@ -41,9 +42,9 @@ type Parser = typeof cppLanguage.parser
 
 // C 和编辑器一样用 C++ 的解析器
 const PARSERS: Record<string, Parser> = {
-  python: pythonLanguage.parser,
-  py: pythonLanguage.parser,
-  python3: pythonLanguage.parser,
+  python: ojPythonLanguage.parser,
+  py: ojPythonLanguage.parser,
+  python3: ojPythonLanguage.parser,
   c: cppLanguage.parser,
   cpp: cppLanguage.parser,
   "c++": cppLanguage.parser,
@@ -54,6 +55,13 @@ function parserFor(lang?: string): Parser | null {
   return PARSERS[lang?.toLowerCase() ?? ""] ?? null
 }
 
+function formatFamilyFor(lang?: string): FormatFamily | null {
+  const parser = parserFor(lang)
+  if (parser === cppLanguage.parser) return "c"
+  if (parser === ojPythonLanguage.parser) return "python"
+  return null
+}
+
 export function escapeHtml(text: string): string {
   return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
 }
@@ -74,7 +82,19 @@ function walk(
     put(code, "")
     return
   }
-  highlightCode(code, parser.parse(code), codeHighlighter, put, () => put("\n", ""))
+  // 字符串里的 %d 这类占位符再拆出来，见 shared/formatPlaceholder.ts
+  const family = formatFamilyFor(lang)
+  const emit = (text: string, classes: string) => {
+    if (!family || !classes.includes("tok-string")) return put(text, classes)
+    let at = 0
+    for (const s of formatSpans(text, family)) {
+      if (s.from > at) put(text.slice(at, s.from), classes)
+      put(text.slice(s.from, s.to), `${classes} ${FORMAT_CLASS[family]}`)
+      at = s.to
+    }
+    if (at < text.length) put(text.slice(at), classes)
+  }
+  highlightCode(code, parser.parse(code), codeHighlighter, emit, () => put("\n", ""))
 }
 
 /** 逐行高亮，返回每行的 HTML，每行的标签自己闭合 */