From 156b51d697d44924abfa8ef169dc112d73207bad Mon Sep 17 00:00:00 2001
From: xfy <i@rua.plus>
Date: Fri, 17 Jul 2026 11:42:55 +0800
Subject: [PATCH] =?UTF-8?q?feat(highlight):=20=E6=96=87=E7=AB=A0=E9=A1=B5?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E5=9D=97=E6=94=AF=E6=8C=81=20Vue=20SFC=20?=
 =?UTF-8?q?=E8=AF=AD=E6=B3=95=E9=AB=98=E4=BA=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

阅读侧(syntect)此前对 ```vue 回退纯文本:syntect 默认集无 Vue
语法、syntaxes/ 无定义、别名表无 vue 条目。

官方 Vue Component.sublime-syntax 因 extends: Packages/HTML/...
用 Sublime Text 包路径,syntect 的 add_from_folder 解析不了(实测
panic),无法直接采用。改为自包含实现:

- syntaxes/Vue.sublime-syntax:自包含 Vue SFC 语法。<template>/
  <script>/<style> 三段在 main 入口按标签名分流(syntect context
  切换后无法回看标签名)。script 按 lang 属性经前瞻分流
  ts/tsx→source.ts、其余→source.js;style 统一 embed source.css
  (scss/less 无对应 scope,因 CSS 是超集兼容);template 内 {{ }}
  插值 embed source.js,其余走内置 HTML 语法。
- 关键约束(syntect 5.3 实测):embed 规则必须用纯净 match+embed+
  escape 写法,附加 pop/embed_scope 会破坏 embed 使其静默回退纯文本;
  escape 用 lookahead 不消费闭合标签。

编辑器侧(lowlight@3.3.0)与阅读侧是独立链路。lowlight 依赖的
highlight.js 11 早已移除 vue grammar,common/all 均不含;
highlightjs-vue 包停在 2019 年 1.0.0 且用旧版 hljsDefineVue 全局
API,与 lowlight@3 的 ESM register 不兼容。故编辑器侧用 registerAlias
把 vue 注册为 xml 别名兜底(template 段按 XML 着色,script/style 段
不精确但不抛 Unknown language);读者看到的阅读侧仍是完整高亮。

src/highlight.rs 别名表加 vue 条目(兜底大写 ```Vue 边界),新增 3 个
Vue 高亮单测(SFC 三段 / lang=ts 走 TS / 大小写别名)。
---
 .../src/__tests__/highlight.test.ts           |   8 +
 libs/tiptap-editor/src/highlight.ts           |   7 +
 src/highlight.rs                              |  69 +++++++
 syntaxes/Vue.sublime-syntax                   | 174 ++++++++++++++++++
 4 files changed, 258 insertions(+)
 create mode 100644 syntaxes/Vue.sublime-syntax

diff --git a/libs/tiptap-editor/src/__tests__/highlight.test.ts b/libs/tiptap-editor/src/__tests__/highlight.test.ts
index 67d2f91..d5504dc 100644
--- a/libs/tiptap-editor/src/__tests__/highlight.test.ts
+++ b/libs/tiptap-editor/src/__tests__/highlight.test.ts
@@ -66,4 +66,12 @@ describe('lowlight wrapper', () => {
     // CodeBlockLowlight 源码用 try/catch 兜底，这里只验 wrapper 不改变此行为。
     expect(() => lowlight.highlight('totally-unknown-lang', 'code')).toThrow();
   });
+
+  it('vue 作为 xml 别名高亮（不抛 Unknown language）', () => {
+    // lowlight 依赖的 highlight.js 11 已移除 vue grammar，
+    // highlight.ts 把 vue 注册为 xml 别名兜底。
+    // 验证：vue 代码能高亮（走 xml grammar，输出含 hljs class）且不抛错。
+    const result = lowlight.highlight('vue', '<template><div>hi</div></template>');
+    expect(JSON.stringify(result)).toContain('hljs-');
+  });
 });
diff --git a/libs/tiptap-editor/src/highlight.ts b/libs/tiptap-editor/src/highlight.ts
index 356c5b0..647eb61 100644
--- a/libs/tiptap-editor/src/highlight.ts
+++ b/libs/tiptap-editor/src/highlight.ts
@@ -2,6 +2,13 @@ import { common, createLowlight } from 'lowlight';
 
 const base = createLowlight(common);
 
+// Vue SFC 别名:lowlight 依赖的 highlight.js 11 早已移除 vue grammar,
+// common/all 均不含 vue。这里把 vue 注册为 xml 的别名,使 ```vue 代码块
+// 在编辑器写作时按 XML/HTML 着色(template 段正常,script/style 段不精确
+// 但不抛 Unknown language)。阅读侧(读者看到的)走 syntect 自包含 Vue
+// 语法(syntaxes/Vue.sublime-syntax),三段都有完整高亮,两侧独立互不影响。
+base.registerAlias({ xml: ['vue'] });
+
 /**
  * 从完整 fence info string 提取语言名（首个 token，小写化）。
  *
diff --git a/src/highlight.rs b/src/highlight.rs
index 9aed29a..dfe3485 100644
--- a/src/highlight.rs
+++ b/src/highlight.rs
@@ -80,6 +80,8 @@ pub mod server {
                     ("kotlin", "kt"),
                     ("swift", "swift"),
                     ("golang", "go"),
+                    // Vue SFC:file_extensions 已含 vue,此条兜底大写 ```Vue 等边界。
+                    ("vue", "vue"),
                 ];
                 for &(from, to) in aliases {
                     // 别名比较同样不区分大小写，保证 "RUST" 与 "rust" 等价。
@@ -363,4 +365,71 @@ mod tests {
         assert!(result.contains("string"), "Zig 字符串未被识别: {}", result);
         assert!(result.contains("numeric"), "Zig 数字未被识别: {}", result);
     }
+
+    #[test]
+    fn highlight_code_vue_sfc() {
+        // Vue SFC 三段(template HTML + script JS + style CSS)都应被识别,
+        // 不回退到纯文本(text plain)。
+        let code = "\
+<template>
+  <div class=\"hello\" @click=\"onClick\">{{ message }}</div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const message = ref('Hello Vue!')
+</script>
+
+<style scoped>
+.hello { color: #42b983; }
+</style>";
+        let result = highlight_code(code, Some("vue"));
+        assert!(
+            !result.contains(r#"<span class="text plain">"#),
+            "Vue 不应回退到纯文本: {}",
+            result
+        );
+        assert!(
+            result.contains("entity name tag"),
+            "Vue template 标签未被识别: {}",
+            result
+        );
+        assert!(
+            result.contains("source js"),
+            "Vue script 段未嵌入 JS 高亮: {}",
+            result
+        );
+        assert!(
+            result.contains("source css"),
+            "Vue style 段未嵌入 CSS 高亮: {}",
+            result
+        );
+        assert!(
+            result.contains("entity other attribute-name"),
+            "Vue 指令/属性未被识别: {}",
+            result
+        );
+    }
+
+    #[test]
+    fn highlight_code_vue_script_lang_ts() {
+        // <script lang="ts"> 应嵌入 TypeScript(scope source ts),而非 JS。
+        let code = "<script lang=\"ts\">\nconst x: number = 42\n</script>";
+        let result = highlight_code(code, Some("vue"));
+        assert!(
+            result.contains("source ts"),
+            "Vue lang=ts 应嵌入 TS: {}",
+            result
+        );
+    }
+
+    #[test]
+    fn highlight_code_vue_resolves_vue_alias() {
+        // 别名表 "vue" 与扩展名 "vue" 输出应一致。
+        let code = "<template><p>{{ msg }}</p></template>";
+        let by_alias = highlight_code(code, Some("vue"));
+        let by_upper = highlight_code(code, Some("Vue"));
+        // 大写标识经别名表 eq_ignore_ascii_case 回退,输出须与小写一致。
+        assert_eq!(by_alias, by_upper);
+    }
 }
diff --git a/syntaxes/Vue.sublime-syntax b/syntaxes/Vue.sublime-syntax
new file mode 100644
index 0000000..10f2471
--- /dev/null
+++ b/syntaxes/Vue.sublime-syntax
@@ -0,0 +1,174 @@
+%YAML 1.2
+---
+# Vue Single-File Component (.vue) 语法高亮。
+#
+# 自包含实现:不依赖 `extends: Packages/HTML/...`(syntect 不认 ST 包路径),
+# 改用 embed: scope: 引用本项目已有的 HTML/JS/TS/TSX/CSS scope。
+#
+# 关键约束(syntect 5.3 实测):
+# - embed 规则必须用纯净写法 `match + embed + escape`,不能附加 pop/embed_scope,
+#   否则 embed 失效并静默回退纯文本。
+# - escape 用 lookahead `(?=...)` 不消费闭合标签,交给外层 context 处理。
+#
+# 分段策略:SFC 的 <template>/<script>/<style> 三段各自有独立的 tag 入口,
+# 在 main 中按标签名直接 push 对应入口(syntect context 切换后无法回看标签名,
+# 故必须一开始就分流)。script 按 lang 属性分发 ts/tsx/js;
+# style 的 scss/less/pug 等本项目无对应 scope,但因 CSS 是其超集,
+# 统一走 source.css(关键字/选择器高亮基本适用)。
+
+name: Vue Component
+scope: text.html.vue
+
+file_extensions:
+  - vue
+
+variables:
+  # Vue 指令/特殊属性名:v-if / @click / :prop / #slot / v-model.trim
+  vue_directive: '(?:\bv-[\w.-]+|@[\w.-]+|:[\w.-]+|#[\w-]+)'
+
+contexts:
+
+  main:
+    # <template ...>:进入 template 段(HTML + 插值 + 指令)
+    - match: '(<)(template)(?=[\s/>])'
+      captures:
+        1: punctuation.definition.tag.begin.html
+        2: entity.name.tag.structure.template.html
+      push: template-tag-open
+    # <script ... lang="ts|tsx|typescript">:TS 分支(前瞻区分,syntect 无变量比较)
+    - match: '(<)(script)(?=[\s/>][^>]*\blang(?:uage)?\s*=\s*[''"](ts|tsx|typescript)[''"])'
+      captures:
+        1: punctuation.definition.tag.begin.html
+        2: entity.name.tag.structure.script.html
+      push: script-tag-open-ts
+    # <script ...>:JS 分支(无 lang 或 lang="js")
+    - match: '(<)(script)(?=[\s/>])'
+      captures:
+        1: punctuation.definition.tag.begin.html
+        2: entity.name.tag.structure.script.html
+      push: script-tag-open
+    # <style ...>:进入 style 段(CSS)
+    - match: '(<)(style)(?=[\s/>])'
+      captures:
+        1: punctuation.definition.tag.begin.html
+        2: entity.name.tag.structure.style.html
+      push: style-tag-open
+    # 其余内容(裸 HTML 标签、文本、注释、DOCTYPE):复用 syntect 内置 HTML 语法
+    - include: scope:text.html.basic
+
+  script-tag-open-ts:
+    - meta_scope: meta.tag.structure.script.begin.html
+    - include: tag-attributes
+    - match: '/>'
+      scope: punctuation.definition.tag.end.html
+      pop: 1
+    - match: '>'
+      scope: punctuation.definition.tag.end.html
+      embed: scope:source.ts
+      escape: '(?=</script[\s>])'
+
+  ###[ TEMPLATE ]#############################################################
+
+  template-tag-open:
+    - meta_scope: meta.tag.structure.template.begin.html
+    - include: tag-attributes
+    - match: '/>'
+      scope: punctuation.definition.tag.end.html
+      pop: 1
+    - match: '>'
+      scope: punctuation.definition.tag.end.html
+      push: template-content
+
+  template-content:
+    - meta_include_prototype: false
+    - meta_content_scope: meta.template.vue
+    # 闭合 </template>:结束段
+    - match: '(?=</template[\s>])'
+      pop: 1
+    # Vue 插值 {{ ... }}:embed JS 表达式
+    - match: '\{\{'
+      scope: punctuation.section.interpolation.begin.html
+      embed: scope:source.js
+      escape: '\}\}'
+      escape_captures:
+        0: punctuation.section.interpolation.end.html
+    # 其余:按 HTML 处理(标签、文本、属性),同时识别 Vue 指令
+    - include: scope:text.html.basic
+
+  ###[ SCRIPT ]###############################################################
+  # 分流在 main 完成:含 lang="ts|tsx|typescript" 的 <script> → script-tag-open-ts;
+  # 其余(无 lang 或 lang="js")→ script-tag-open(embed JS)。
+  # syntect 无变量比较,无法在单 context 内按 lang 值动态选 embed 目标,
+  # 故用两条前瞻 match 在入口处分流。
+
+  script-tag-open:
+    - meta_scope: meta.tag.structure.script.begin.html
+    - include: tag-attributes
+    - match: '/>'
+      scope: punctuation.definition.tag.end.html
+      pop: 1
+    - match: '>'
+      scope: punctuation.definition.tag.end.html
+      embed: scope:source.js
+      escape: '(?=</script[\s>])'
+
+  ###[ STYLE ]################################################################
+
+  style-tag-open:
+    - meta_scope: meta.tag.structure.style.begin.html
+    - include: tag-attributes
+    - match: '/>'
+      scope: punctuation.definition.tag.end.html
+      pop: 1
+    - match: '>'
+      scope: punctuation.definition.tag.end.html
+      embed: scope:source.css
+      escape: '(?=</style[\s>])'
+
+  ###[ SHARED ]###############################################################
+
+  # 标签属性扫描:Vue 指令 + 普通属性 + 值。供 template/script/style 的 open context 复用。
+  tag-attributes:
+    # Vue 指令(v-if / @click / :prop / #slot)优先,标为属性名
+    - match: '{{vue_directive}}\s*(=)?'
+      scope: entity.other.attribute-name.html
+    # 普通属性名 = 值
+    - match: '\b[A-Za-z-][\w:-]*\s*(=)'
+      scope: entity.other.attribute-name.html
+      push: maybe-attr-value
+    # 布尔属性
+    - match: '\b[A-Za-z-][\w:-]*'
+      scope: entity.other.attribute-name.html
+    - include: whitespace
+
+  maybe-attr-value:
+    - include: whitespace
+    - match: '"'
+      scope: punctuation.definition.string.begin.html
+      set: double-quoted-attr-value
+    - match: "'"
+      scope: punctuation.definition.string.begin.html
+      set: single-quoted-attr-value
+    - match: '(?=\S)'
+      pop: 1
+
+  double-quoted-attr-value:
+    - meta_scope: string.quoted.double.html
+    - match: '"'
+      scope: punctuation.definition.string.end.html
+      pop: 1
+    - include: attr-value-escapes
+
+  single-quoted-attr-value:
+    - meta_scope: string.quoted.single.html
+    - match: "'"
+      scope: punctuation.definition.string.end.html
+      pop: 1
+    - include: attr-value-escapes
+
+  attr-value-escapes:
+    - match: '&[a-zA-Z]+;|&#\d+;|&#x[0-9A-Fa-f]+;'
+      scope: constant.character.entity.html
+
+  whitespace:
+    - match: '\s+'