{
  "url": "https://unifast.dev/docs/guides/syntax-highlighting/",
  "locale": "en",
  "title": "Syntax Highlighting",
  "description": "Choose from four syntax highlighting engines in unifast: tree-sitter, syntect, Shiki, and highlight.js.",
  "section": "guides",
  "body": "unifast supports four syntax highlighting engines. Two run inside the Rust compiler (**tree-sitter**, **syntect**), and two run in JavaScript (**Shiki**, **highlight.js**).\n\n### Comparison\n\n| | tree-sitter | syntect | Shiki | highlight.js |\n|---|-------------|---------|-------|--------------|\n| **Runtime** | Rust (built-in) | Rust (built-in) | JavaScript | JavaScript |\n| **Parsing** | AST-based (tree-sitter grammars) | Regex-based (TextMate grammars) | Regex-based (VS Code grammars) | Regex-based (highlight.js grammars) |\n| **Speed** | Fastest | Fast | Slower | Slower |\n| **Languages** | 29 languages + syntect fallback | 100+ (TextMate) | VS Code grammars | 190+ |\n| **CSS output** | Class-based (`ts-*`) | Class-based (`sy-*`) | Inline styles or class-based | Class-based (`hljs`) |\n| **Package** | `@unifast/node` | `@unifast/node` | `@unifast/shiki` | `@unifast/highlight` |\n| **Best for** | Precise highlighting, broad coverage | Simple setup, fast startup | Fine-grained theme control | highlight.js theme ecosystem |\n\n### Using tree-sitter\n\ntree-sitter uses AST-based parsing for precise syntax highlighting. It runs inside the Rust compiler and supports 29 languages natively. For unsupported languages, it automatically falls back to syntect.\n\ntree-sitter is included in `@unifast/node` — no separate install needed.\n\n```ts\n\nconst result = compile(\n  '```typescript\\nconst x: number = 42;\\n```',\n  { plugins: [treeSitter()] }\n);\n```\n\ntree-sitter generates CSS class names prefixed with `ts-`. You need to provide CSS rules for these classes in your stylesheet.\n\n#### Supported languages\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\nLanguage aliases are also supported (e.g. `ts`, `py`, `rs`, `sh`, `yml`, `rb`).\n\n### Using syntect\n\nsyntect uses TextMate grammars and runs entirely inside the Rust compiler — no additional JavaScript overhead.\n\nsyntect is included in `@unifast/node` — no separate install needed.\n\n```ts\n\nconst result = compile(\n  '```typescript\\nconst x: number = 42;\\n```',\n  { plugins: [syntect()] }\n);\n```\n\nsyntect generates CSS class names prefixed with `sy-`. You need to provide CSS rules for these classes in your stylesheet.\n\n### Using Shiki\n\nShiki uses VS Code's TextMate grammar engine for accurate highlighting with theme support.\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### Using highlight.js\n\n`@unifast/highlight` uses [lowlight](https://github.com/wooorm/lowlight) (highlight.js) and runs as a HAST transform in JavaScript. It supports 190+ languages and works with any highlight.js theme.\n\n```ts\n\nconst result = compile(\n  '```typescript\\nconst x: number = 42;\\n```',\n  { plugins: [highlight()] }\n);\n```\n\nhighlight.js generates class names with the `hljs` prefix. Use any [highlight.js theme CSS](https://highlightjs.org/demo) for styling.\n\n### Line Numbers\n\nAll engines support line numbers. Enable them in the compile options:\n\n```ts\n\nconst result = compile(source, {\n  plugins: [treeSitter()],\n  lineNumbers: true,\n});\n```\n\nEach line is wrapped in a `<span>` with a `data-line` attribute for CSS-based styling:\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### See Also\n\n- [syntect()](/docs/packages/node/syntect) - syntect API reference\n- [createShikiPlugin()](/docs/packages/shiki/create-shiki-plugin) - Shiki API reference",
  "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"
    }
  ]
}