{
  "url": "https://unifast.dev/pt-BR/docs/guides/syntax-highlighting/",
  "locale": "pt-BR",
  "title": "Syntax Highlighting",
  "description": "Escolha entre quatro engines de syntax highlighting no unifast: tree-sitter, syntect, Shiki e highlight.js.",
  "section": "guides",
  "body": "O unifast suporta quatro engines de syntax highlighting. Duas rodam dentro do compilador Rust (**tree-sitter**, **syntect**), e duas rodam em JavaScript (**Shiki**, **highlight.js**).\n\n### Comparação\n\n| | tree-sitter | syntect | Shiki | highlight.js |\n|---|-------------|---------|-------|--------------|\n| **Runtime** | Rust (integrado) | Rust (integrado) | JavaScript | JavaScript |\n| **Parsing** | Baseado em AST (gramáticas tree-sitter) | Baseado em regex (gramáticas TextMate) | Baseado em regex (gramáticas do VS Code) | Baseado em regex (gramáticas highlight.js) |\n| **Velocidade** | Mais rápido | Rápido | Mais lento | Mais lento |\n| **Linguagens** | 29 linguagens + fallback para syntect | 100+ (TextMate) | Gramáticas do VS Code | 190+ |\n| **Saída CSS** | Baseada em classes (`ts-*`) | Baseada em classes (`sy-*`) | Estilos inline ou baseados em classes | Baseada em classes (`hljs`) |\n| **Pacote** | `@unifast/node` | `@unifast/node` | `@unifast/shiki` | `@unifast/highlight` |\n| **Melhor para** | Highlighting preciso, ampla cobertura | Setup simples, startup rápido | Controle fino de tema | Ecossistema de temas do highlight.js |\n\n### Usando tree-sitter\n\nO tree-sitter usa parsing baseado em AST para syntax highlighting preciso. Ele roda dentro do compilador Rust e suporta 29 linguagens nativamente. Para linguagens não suportadas, faz fallback automático para o syntect.\n\nO tree-sitter está incluído em `@unifast/node` — não é necessário instalar separadamente.\n\n```ts\n\nconst result = compile(\n  '```typescript\\nconst x: number = 42;\\n```',\n  { plugins: [treeSitter()] }\n);\n```\n\nO tree-sitter gera nomes de classes CSS com prefixo `ts-`. Você precisa fornecer regras CSS para essas classes em sua stylesheet.\n\n#### Linguagens suportadas\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\nAliases de linguagens também são suportados (ex.: `ts`, `py`, `rs`, `sh`, `yml`, `rb`).\n\n### Usando syntect\n\nO syntect usa gramáticas TextMate e roda inteiramente dentro do compilador Rust — sem overhead adicional de JavaScript.\n\nO syntect está incluído em `@unifast/node` — não é necessário instalar separadamente.\n\n```ts\n\nconst result = compile(\n  '```typescript\\nconst x: number = 42;\\n```',\n  { plugins: [syntect()] }\n);\n```\n\nO syntect gera nomes de classes CSS com prefixo `sy-`. Você precisa fornecer regras CSS para essas classes em sua stylesheet.\n\n### Usando Shiki\n\nO Shiki usa o engine de gramáticas TextMate do VS Code para um highlighting preciso com suporte a temas.\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### Usando highlight.js\n\nO `@unifast/highlight` usa [lowlight](https://github.com/wooorm/lowlight) (highlight.js) e roda como uma transformação HAST em JavaScript. Ele suporta mais de 190 linguagens e funciona com qualquer tema do highlight.js.\n\n```ts\n\nconst result = compile(\n  '```typescript\\nconst x: number = 42;\\n```',\n  { plugins: [highlight()] }\n);\n```\n\nO highlight.js gera nomes de classes com o prefixo `hljs`. Use qualquer [CSS de tema do highlight.js](https://highlightjs.org/demo) para a estilização.\n\n### Números de Linha\n\nTodas as engines suportam números de linha. Habilite-os nas opções de compilação:\n\n```ts\n\nconst result = compile(source, {\n  plugins: [treeSitter()],\n  lineNumbers: true,\n});\n```\n\nCada linha é envolvida em um `<span>` com um atributo `data-line` para estilização baseada em 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### Veja Também\n\n- [syntect()](/docs/packages/node/syntect) - Referência da API do syntect\n- [createShikiPlugin()](/docs/packages/shiki/create-shiki-plugin) - Referência da API do 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"
    }
  ]
}