{
  "url": "https://unifast.dev/zh-TW/docs/guides/syntax-highlighting/",
  "locale": "zh-TW",
  "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 輸出** | 以 class 為基礎（`ts-*`） | 以 class 為基礎（`sy-*`） | 行內樣式或以 class 為基礎 | 以 class 為基礎（`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 會產生以 `ts-` 為前綴的 CSS class 名稱。您需要在樣式表中為這些 class 提供對應的 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 會產生以 `sy-` 為前綴的 CSS class 名稱。您需要在樣式表中為這些 class 提供對應的 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` 前綴的 class 名稱。您可以使用任意的 [highlight.js 佈景主題 CSS](https://highlightjs.org/demo) 來設定樣式。\n\n### 行號顯示\n\n所有引擎都支援行號。您可以在 compile 選項中啟用：\n\n```ts\n\nconst result = compile(source, {\n  plugins: [treeSitter()],\n  lineNumbers: true,\n});\n```\n\n每一行都會被包在 `<span>` 中，並附帶 `data-line` 屬性，方便透過 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"
    }
  ]
}