{
  "url": "https://unifast.dev/vi/docs/guides/syntax-highlighting/",
  "locale": "vi",
  "title": "Syntax Highlighting",
  "description": "Lựa chọn từ bốn engine syntax highlighting trong unifast: tree-sitter, syntect, Shiki và highlight.js.",
  "section": "guides",
  "body": "unifast hỗ trợ bốn engine syntax highlighting. Hai engine chạy bên trong trình biên dịch Rust (**tree-sitter**, **syntect**), và hai engine chạy trong JavaScript (**Shiki**, **highlight.js**).\n\n### So sánh\n\n| | tree-sitter | syntect | Shiki | highlight.js |\n|---|-------------|---------|-------|--------------|\n| **Runtime** | Rust (built-in) | Rust (built-in) | JavaScript | JavaScript |\n| **Parsing** | Dựa trên AST (tree-sitter grammars) | Dựa trên regex (TextMate grammars) | Dựa trên regex (VS Code grammars) | Dựa trên regex (highlight.js grammars) |\n| **Tốc độ** | Nhanh nhất | Nhanh | Chậm hơn | Chậm hơn |\n| **Ngôn ngữ** | 29 ngôn ngữ + fallback qua syntect | 100+ (TextMate) | VS Code grammars | 190+ |\n| **Output CSS** | Dựa trên class (`ts-*`) | Dựa trên class (`sy-*`) | Inline style hoặc dựa trên class | Dựa trên class (`hljs`) |\n| **Gói** | `@unifast/node` | `@unifast/node` | `@unifast/shiki` | `@unifast/highlight` |\n| **Phù hợp nhất cho** | Highlight chính xác, phạm vi rộng | Cài đặt đơn giản, khởi động nhanh | Kiểm soát theme chi tiết | Hệ sinh thái theme của highlight.js |\n\n### Sử dụng tree-sitter\n\ntree-sitter sử dụng parsing dựa trên AST để highlight cú pháp một cách chính xác. Nó chạy bên trong trình biên dịch Rust và hỗ trợ sẵn 29 ngôn ngữ. Với những ngôn ngữ không được hỗ trợ, nó tự động fallback sang syntect.\n\ntree-sitter được đi kèm trong `@unifast/node` — không cần cài đặt thêm gói nào.\n\n```ts\n\nconst result = compile(\n  '```typescript\\nconst x: number = 42;\\n```',\n  { plugins: [treeSitter()] }\n);\n```\n\ntree-sitter sinh ra các tên class CSS có tiền tố `ts-`. Bạn cần cung cấp các quy tắc CSS cho những class này trong stylesheet của mình.\n\n#### Các ngôn ngữ được hỗ trợ\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\nCác alias ngôn ngữ cũng được hỗ trợ (ví dụ `ts`, `py`, `rs`, `sh`, `yml`, `rb`).\n\n### Sử dụng syntect\n\nsyntect sử dụng TextMate grammars và chạy hoàn toàn bên trong trình biên dịch Rust — không có chi phí JavaScript phát sinh.\n\nsyntect được đi kèm trong `@unifast/node` — không cần cài đặt thêm gói nào.\n\n```ts\n\nconst result = compile(\n  '```typescript\\nconst x: number = 42;\\n```',\n  { plugins: [syntect()] }\n);\n```\n\nsyntect sinh ra các tên class CSS có tiền tố `sy-`. Bạn cần cung cấp các quy tắc CSS cho những class này trong stylesheet của mình.\n\n### Sử dụng Shiki\n\nShiki sử dụng engine TextMate grammar của VS Code để highlight chính xác cùng khả năng hỗ trợ theme đầy đủ.\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### Sử dụng highlight.js\n\n`@unifast/highlight` sử dụng [lowlight](https://github.com/wooorm/lowlight) (highlight.js) và chạy dưới dạng một phép biến đổi HAST trong JavaScript. Nó hỗ trợ hơn 190 ngôn ngữ và hoạt động với bất kỳ theme nào của highlight.js.\n\n```ts\n\nconst result = compile(\n  '```typescript\\nconst x: number = 42;\\n```',\n  { plugins: [highlight()] }\n);\n```\n\nhighlight.js sinh ra các tên class với tiền tố `hljs`. Bạn có thể dùng bất kỳ [CSS theme nào của highlight.js](https://highlightjs.org/demo) để tạo kiểu.\n\n### Số dòng\n\nTất cả các engine đều hỗ trợ số dòng. Bật tính năng này trong tùy chọn biên dịch:\n\n```ts\n\nconst result = compile(source, {\n  plugins: [treeSitter()],\n  lineNumbers: true,\n});\n```\n\nMỗi dòng được bọc trong một `<span>` kèm thuộc tính `data-line` để tạo kiểu qua 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### Xem thêm\n\n- [syntect()](/docs/packages/node/syntect) - Tài liệu tham chiếu API syntect\n- [createShikiPlugin()](/docs/packages/shiki/create-shiki-plugin) - Tài liệu tham chiếu API Shiki",
  "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"
    }
  ]
}