{
  "url": "https://unifast.dev/id/docs/guides/syntax-highlighting/",
  "locale": "id",
  "title": "Syntax Highlighting",
  "description": "Pilih dari empat engine syntax highlighting di unifast: tree-sitter, syntect, Shiki, dan highlight.js.",
  "section": "guides",
  "body": "unifast mendukung empat engine syntax highlighting. Dua di antaranya berjalan di dalam compiler Rust (**tree-sitter**, **syntect**), dan dua lainnya berjalan di JavaScript (**Shiki**, **highlight.js**).\n\n### Perbandingan\n\n| | tree-sitter | syntect | Shiki | highlight.js |\n|---|-------------|---------|-------|--------------|\n| **Runtime** | Rust (bawaan) | Rust (bawaan) | JavaScript | JavaScript |\n| **Parsing** | Berbasis AST (grammar tree-sitter) | Berbasis regex (grammar TextMate) | Berbasis regex (grammar VS Code) | Berbasis regex (grammar highlight.js) |\n| **Kecepatan** | Tercepat | Cepat | Lebih lambat | Lebih lambat |\n| **Bahasa** | 29 bahasa + fallback syntect | 100+ (TextMate) | Grammar VS Code | 190+ |\n| **Output CSS** | Berbasis class (`ts-*`) | Berbasis class (`sy-*`) | Inline style atau berbasis class | Berbasis class (`hljs`) |\n| **Paket** | `@unifast/node` | `@unifast/node` | `@unifast/shiki` | `@unifast/highlight` |\n| **Cocok untuk** | Highlighting presisi, cakupan luas | Setup sederhana, startup cepat | Kontrol tema yang detail | Ekosistem tema highlight.js |\n\n### Menggunakan tree-sitter\n\ntree-sitter menggunakan parsing berbasis AST untuk syntax highlighting yang presisi. Ia berjalan di dalam compiler Rust dan secara native mendukung 29 bahasa. Untuk bahasa yang tidak didukung, ia secara otomatis fallback ke syntect.\n\ntree-sitter sudah disertakan dalam `@unifast/node` — tidak perlu instalasi terpisah.\n\n```ts\n\nconst result = compile(\n  '```typescript\\nconst x: number = 42;\\n```',\n  { plugins: [treeSitter()] }\n);\n```\n\ntree-sitter menghasilkan nama class CSS dengan prefix `ts-`. Anda perlu menyediakan aturan CSS untuk class-class ini di stylesheet Anda.\n\n#### Bahasa yang didukung\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\nAlias bahasa juga didukung (misalnya `ts`, `py`, `rs`, `sh`, `yml`, `rb`).\n\n### Menggunakan syntect\n\nsyntect menggunakan grammar TextMate dan berjalan sepenuhnya di dalam compiler Rust — tidak ada overhead JavaScript tambahan.\n\nsyntect sudah disertakan dalam `@unifast/node` — tidak perlu instalasi terpisah.\n\n```ts\n\nconst result = compile(\n  '```typescript\\nconst x: number = 42;\\n```',\n  { plugins: [syntect()] }\n);\n```\n\nsyntect menghasilkan nama class CSS dengan prefix `sy-`. Anda perlu menyediakan aturan CSS untuk class-class ini di stylesheet Anda.\n\n### Menggunakan Shiki\n\nShiki menggunakan engine grammar TextMate dari VS Code untuk highlighting yang akurat dengan dukungan tema.\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### Menggunakan highlight.js\n\n`@unifast/highlight` menggunakan [lowlight](https://github.com/wooorm/lowlight) (highlight.js) dan berjalan sebagai transform HAST di JavaScript. Ia mendukung 190+ bahasa dan bekerja dengan tema highlight.js apa pun.\n\n```ts\n\nconst result = compile(\n  '```typescript\\nconst x: number = 42;\\n```',\n  { plugins: [highlight()] }\n);\n```\n\nhighlight.js menghasilkan nama class dengan prefix `hljs`. Gunakan [tema CSS highlight.js](https://highlightjs.org/demo) apa pun untuk styling.\n\n### Nomor Baris\n\nSemua engine mendukung nomor baris. Aktifkan di opsi compile:\n\n```ts\n\nconst result = compile(source, {\n  plugins: [treeSitter()],\n  lineNumbers: true,\n});\n```\n\nSetiap baris dibungkus dalam sebuah `<span>` dengan atribut `data-line` untuk styling berbasis 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### Lihat Juga\n\n- [syntect()](/docs/packages/node/syntect) - Referensi API syntect\n- [createShikiPlugin()](/docs/packages/shiki/create-shiki-plugin) - Referensi 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"
    }
  ]
}