{
  "url": "https://unifast.dev/zh-CN/docs/guides/syntax-highlighting/",
  "locale": "zh-CN",
  "title": "语法高亮",
  "description": "在 unifast 中，你可以从 tree-sitter、syntect、Shiki 和 highlight.js 这四种语法高亮引擎中自由选择。",
  "section": "guides",
  "body": "unifast 支持四种语法高亮引擎。其中两种运行在 Rust 编译器内部（**tree-sitter**、**syntect**），另外两种运行在 JavaScript 中（**Shiki**、**highlight.js**）。\n\n### 对比\n\n| | tree-sitter | syntect | Shiki | highlight.js |\n|---|-------------|---------|-------|--------------|\n| **运行时** | Rust（内置） | Rust（内置） | JavaScript | JavaScript |\n| **解析方式** | 基于 AST（tree-sitter 语法） | 基于正则（TextMate 语法） | 基于正则（VS Code 语法） | 基于正则（highlight.js 语法） |\n| **速度** | 最快 | 快 | 较慢 | 较慢 |\n| **语言支持** | 29 种语言 + syntect 回退 | 100+（TextMate） | VS Code 语法 | 190+ |\n| **CSS 输出** | 基于类名（`ts-*`） | 基于类名（`sy-*`） | 内联样式或基于类名 | 基于类名（`hljs`） |\n| **所在包** | `@unifast/node` | `@unifast/node` | `@unifast/shiki` | `@unifast/highlight` |\n| **适用场景** | 需要精确高亮、覆盖范围广 | 配置简单、启动快 | 需要精细的主题控制 | 利用 highlight.js 主题生态 |\n\n### 使用 tree-sitter\n\ntree-sitter 采用基于 AST 的解析方式实现精确的语法高亮。它运行在 Rust 编译器内部，原生支持 29 种语言；对于不支持的语言，会自动回退到 syntect。\n\ntree-sitter 已包含在 `@unifast/node` 中 —— 无需单独安装。\n\n```ts\n\nconst result = compile(\n  '```typescript\\nconst x: number = 42;\\n```',\n  { plugins: [treeSitter()] }\n);\n```\n\ntree-sitter 生成的 CSS 类名均以 `ts-` 为前缀。你需要在样式表中为这些类提供对应的 CSS 规则。\n\n#### 支持的语言\n\nTypeScript、TSX、JavaScript、HTML、CSS、Python、Rust、JSON、YAML、Go、Ruby、TOML、Swift、PHP、Java、Lua、Scala、Zig、Elixir、OCaml、R、Make、Nix、Regex、Erlang、Bash、C、C++、CMake\n\n同时也支持语言别名（例如 `ts`、`py`、`rs`、`sh`、`yml`、`rb`）。\n\n### 使用 syntect\n\nsyntect 使用 TextMate 语法，完全运行在 Rust 编译器内部 —— 不会引入额外的 JavaScript 开销。\n\nsyntect 已包含在 `@unifast/node` 中 —— 无需单独安装。\n\n```ts\n\nconst result = compile(\n  '```typescript\\nconst x: number = 42;\\n```',\n  { plugins: [syntect()] }\n);\n```\n\nsyntect 生成的 CSS 类名均以 `sy-` 为前缀。你需要在样式表中为这些类提供对应的 CSS 规则。\n\n### 使用 Shiki\n\nShiki 使用 VS Code 的 TextMate 语法引擎，可实现精确的高亮并支持主题。\n\n```ts\n\nconst shiki = await createShikiPlugin({\n  theme: \"github-dark\",\n  langs: [\"typescript\", \"rust\", \"bash\"],\n});\n\nconst result = compile(\n  '```typescript\\nconst x: number = 42;\\n```',\n  { plugins: [shiki] }\n);\n```\n\n### 使用 highlight.js\n\n`@unifast/highlight` 基于 [lowlight](https://github.com/wooorm/lowlight)（highlight.js 的封装），以 JavaScript HAST 转换的形式运行。它支持 190 多种语言，并可搭配任意 highlight.js 主题使用。\n\n```ts\n\nconst result = compile(\n  '```typescript\\nconst x: number = 42;\\n```',\n  { plugins: [highlight()] }\n);\n```\n\nhighlight.js 生成的类名带有 `hljs` 前缀。可以使用任意 [highlight.js 主题 CSS](https://highlightjs.org/demo) 进行样式设置。\n\n### 行号\n\n所有引擎都支持行号。只需在编译选项中启用即可：\n\n```ts\n\nconst result = compile(source, {\n  plugins: [treeSitter()],\n  lineNumbers: true,\n});\n```\n\n每一行都会被包裹在一个带 `data-line` 属性的 `<span>` 中，便于通过 CSS 进行样式定制：\n\n```css\n[data-line]::before {\n  content: attr(data-line);\n  display: inline-block;\n  width: 2rem;\n  text-align: right;\n  margin-right: 1rem;\n  color: #6b7280;\n}\n```\n\n### 参见\n\n- [syntect()](/docs/packages/node/syntect) —— syntect API 参考\n- [createShikiPlugin()](/docs/packages/shiki/create-shiki-plugin) —— Shiki API 参考",
  "alternates": [
    {
      "locale": "en",
      "url": "https://unifast.dev/docs/guides/syntax-highlighting/",
      "api": "https://unifast.dev//api/docs/guides/syntax-highlighting.json"
    },
    {
      "locale": "ja",
      "url": "https://unifast.dev/ja/docs/guides/syntax-highlighting/",
      "api": "https://unifast.dev//api/ja/docs/guides/syntax-highlighting.json"
    },
    {
      "locale": "zh-CN",
      "url": "https://unifast.dev/zh-CN/docs/guides/syntax-highlighting/",
      "api": "https://unifast.dev//api/zh-CN/docs/guides/syntax-highlighting.json"
    },
    {
      "locale": "zh-TW",
      "url": "https://unifast.dev/zh-TW/docs/guides/syntax-highlighting/",
      "api": "https://unifast.dev//api/zh-TW/docs/guides/syntax-highlighting.json"
    },
    {
      "locale": "ko",
      "url": "https://unifast.dev/ko/docs/guides/syntax-highlighting/",
      "api": "https://unifast.dev//api/ko/docs/guides/syntax-highlighting.json"
    },
    {
      "locale": "fr",
      "url": "https://unifast.dev/fr/docs/guides/syntax-highlighting/",
      "api": "https://unifast.dev//api/fr/docs/guides/syntax-highlighting.json"
    },
    {
      "locale": "it",
      "url": "https://unifast.dev/it/docs/guides/syntax-highlighting/",
      "api": "https://unifast.dev//api/it/docs/guides/syntax-highlighting.json"
    },
    {
      "locale": "es",
      "url": "https://unifast.dev/es/docs/guides/syntax-highlighting/",
      "api": "https://unifast.dev//api/es/docs/guides/syntax-highlighting.json"
    },
    {
      "locale": "pt-BR",
      "url": "https://unifast.dev/pt-BR/docs/guides/syntax-highlighting/",
      "api": "https://unifast.dev//api/pt-BR/docs/guides/syntax-highlighting.json"
    },
    {
      "locale": "de",
      "url": "https://unifast.dev/de/docs/guides/syntax-highlighting/",
      "api": "https://unifast.dev//api/de/docs/guides/syntax-highlighting.json"
    },
    {
      "locale": "ru",
      "url": "https://unifast.dev/ru/docs/guides/syntax-highlighting/",
      "api": "https://unifast.dev//api/ru/docs/guides/syntax-highlighting.json"
    },
    {
      "locale": "hi",
      "url": "https://unifast.dev/hi/docs/guides/syntax-highlighting/",
      "api": "https://unifast.dev//api/hi/docs/guides/syntax-highlighting.json"
    },
    {
      "locale": "id",
      "url": "https://unifast.dev/id/docs/guides/syntax-highlighting/",
      "api": "https://unifast.dev//api/id/docs/guides/syntax-highlighting.json"
    },
    {
      "locale": "tr",
      "url": "https://unifast.dev/tr/docs/guides/syntax-highlighting/",
      "api": "https://unifast.dev//api/tr/docs/guides/syntax-highlighting.json"
    },
    {
      "locale": "vi",
      "url": "https://unifast.dev/vi/docs/guides/syntax-highlighting/",
      "api": "https://unifast.dev//api/vi/docs/guides/syntax-highlighting.json"
    }
  ]
}