{
  "url": "https://unifast.dev/es/docs/guides/syntax-highlighting/",
  "locale": "es",
  "title": "Resaltado de sintaxis",
  "description": "Elige entre cuatro motores de resaltado de sintaxis en unifast: tree-sitter, syntect, Shiki y highlight.js.",
  "section": "guides",
  "body": "unifast soporta cuatro motores de resaltado de sintaxis. Dos se ejecutan dentro del compilador en Rust (**tree-sitter**, **syntect**), y dos se ejecutan en JavaScript (**Shiki**, **highlight.js**).\n\n### Comparativa\n\n| | tree-sitter | syntect | Shiki | highlight.js |\n|---|-------------|---------|-------|--------------|\n| **Runtime** | Rust (integrado) | Rust (integrado) | JavaScript | JavaScript |\n| **Parsing** | Basado en AST (gramáticas tree-sitter) | Basado en regex (gramáticas TextMate) | Basado en regex (gramáticas de VS Code) | Basado en regex (gramáticas de highlight.js) |\n| **Velocidad** | Más rápido | Rápido | Más lento | Más lento |\n| **Lenguajes** | 29 lenguajes + respaldo con syntect | 100+ (TextMate) | Gramáticas de VS Code | 190+ |\n| **Salida CSS** | Basada en clases (`ts-*`) | Basada en clases (`sy-*`) | Estilos en línea o basada en clases | Basada en clases (`hljs`) |\n| **Paquete** | `@unifast/node` | `@unifast/node` | `@unifast/shiki` | `@unifast/highlight` |\n| **Ideal para** | Resaltado preciso, cobertura amplia | Configuración simple, arranque rápido | Control fino del tema | Ecosistema de temas de highlight.js |\n\n### Uso de tree-sitter\n\ntree-sitter utiliza parsing basado en AST para un resaltado de sintaxis preciso. Se ejecuta dentro del compilador en Rust y soporta 29 lenguajes de forma nativa. Para los lenguajes no soportados, recurre automáticamente a syntect.\n\ntree-sitter está incluido en `@unifast/node`, no es necesaria una instalación aparte.\n\n```ts\n\nconst result = compile(\n  '```typescript\\nconst x: number = 42;\\n```',\n  { plugins: [treeSitter()] }\n);\n```\n\ntree-sitter genera nombres de clases CSS con el prefijo `ts-`. Debes proporcionar reglas CSS para estas clases en tu hoja de estilos.\n\n#### Lenguajes soportados\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\nTambién se admiten alias de lenguaje (p. ej. `ts`, `py`, `rs`, `sh`, `yml`, `rb`).\n\n### Uso de syntect\n\nsyntect utiliza gramáticas TextMate y se ejecuta completamente dentro del compilador en Rust, sin sobrecarga adicional de JavaScript.\n\nsyntect está incluido en `@unifast/node`, no es necesaria una instalación aparte.\n\n```ts\n\nconst result = compile(\n  '```typescript\\nconst x: number = 42;\\n```',\n  { plugins: [syntect()] }\n);\n```\n\nsyntect genera nombres de clases CSS con el prefijo `sy-`. Debes proporcionar reglas CSS para estas clases en tu hoja de estilos.\n\n### Uso de Shiki\n\nShiki utiliza el motor de gramáticas TextMate de VS Code para un resaltado preciso con soporte de 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### Uso de highlight.js\n\n`@unifast/highlight` utiliza [lowlight](https://github.com/wooorm/lowlight) (highlight.js) y se ejecuta como una transformación HAST en JavaScript. Soporta más de 190 lenguajes y funciona con cualquier tema de highlight.js.\n\n```ts\n\nconst result = compile(\n  '```typescript\\nconst x: number = 42;\\n```',\n  { plugins: [highlight()] }\n);\n```\n\nhighlight.js genera nombres de clase con el prefijo `hljs`. Usa cualquier [tema CSS de highlight.js](https://highlightjs.org/demo) para el estilo.\n\n### Números de línea\n\nTodos los motores soportan números de línea. Actívalos en las opciones de compilación:\n\n```ts\n\nconst result = compile(source, {\n  plugins: [treeSitter()],\n  lineNumbers: true,\n});\n```\n\nCada línea se envuelve en un `<span>` con un atributo `data-line` para el estilo basado en 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### Véase también\n\n- [syntect()](/docs/packages/node/syntect) - Referencia de la API de syntect\n- [createShikiPlugin()](/docs/packages/shiki/create-shiki-plugin) - Referencia de la API de 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"
    }
  ]
}