{
  "url": "https://unifast.dev/fr/docs/guides/syntax-highlighting/",
  "locale": "fr",
  "title": "Coloration syntaxique",
  "description": "Choisissez parmi quatre moteurs de coloration syntaxique dans unifast : tree-sitter, syntect, Shiki et highlight.js.",
  "section": "guides",
  "body": "unifast prend en charge quatre moteurs de coloration syntaxique. Deux s'exécutent à l'intérieur du compilateur Rust (**tree-sitter**, **syntect**), et deux en JavaScript (**Shiki**, **highlight.js**).\n\n### Comparaison\n\n| | tree-sitter | syntect | Shiki | highlight.js |\n|---|-------------|---------|-------|--------------|\n| **Runtime** | Rust (intégré) | Rust (intégré) | JavaScript | JavaScript |\n| **Analyse** | Basée sur l'AST (grammaires tree-sitter) | Basée sur des expressions régulières (grammaires TextMate) | Basée sur des expressions régulières (grammaires VS Code) | Basée sur des expressions régulières (grammaires highlight.js) |\n| **Vitesse** | La plus rapide | Rapide | Plus lent | Plus lent |\n| **Langages** | 29 langages + repli vers syntect | 100+ (TextMate) | Grammaires VS Code | 190+ |\n| **Sortie CSS** | Par classe (`ts-*`) | Par classe (`sy-*`) | Styles en ligne ou par classe | Par classe (`hljs`) |\n| **Paquet** | `@unifast/node` | `@unifast/node` | `@unifast/shiki` | `@unifast/highlight` |\n| **Idéal pour** | Coloration précise, large couverture | Installation simple, démarrage rapide | Contrôle fin des thèmes | Écosystème de thèmes highlight.js |\n\n### Utiliser tree-sitter\n\ntree-sitter s'appuie sur une analyse basée sur l'AST pour une coloration syntaxique précise. Il s'exécute dans le compilateur Rust et prend en charge nativement 29 langages. Pour les langages non pris en charge, il bascule automatiquement sur syntect.\n\ntree-sitter est inclus dans `@unifast/node` — aucune installation séparée n'est nécessaire.\n\n```ts\n\nconst result = compile(\n  '```typescript\\nconst x: number = 42;\\n```',\n  { plugins: [treeSitter()] }\n);\n```\n\ntree-sitter génère des noms de classes CSS préfixés par `ts-`. Vous devez fournir les règles CSS correspondantes dans votre feuille de style.\n\n#### Langages pris en charge\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\nLes alias de langage sont également pris en charge (p. ex. `ts`, `py`, `rs`, `sh`, `yml`, `rb`).\n\n### Utiliser syntect\n\nsyntect utilise les grammaires TextMate et s'exécute entièrement dans le compilateur Rust — sans surcoût JavaScript supplémentaire.\n\nsyntect est inclus dans `@unifast/node` — aucune installation séparée n'est nécessaire.\n\n```ts\n\nconst result = compile(\n  '```typescript\\nconst x: number = 42;\\n```',\n  { plugins: [syntect()] }\n);\n```\n\nsyntect génère des noms de classes CSS préfixés par `sy-`. Vous devez fournir les règles CSS correspondantes dans votre feuille de style.\n\n### Utiliser Shiki\n\nShiki utilise le moteur de grammaires TextMate de VS Code pour une coloration précise avec la prise en charge des thèmes.\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### Utiliser highlight.js\n\n`@unifast/highlight` s'appuie sur [lowlight](https://github.com/wooorm/lowlight) (highlight.js) et s'exécute sous forme de transformation HAST en JavaScript. Il prend en charge plus de 190 langages et fonctionne avec n'importe quel thème highlight.js.\n\n```ts\n\nconst result = compile(\n  '```typescript\\nconst x: number = 42;\\n```',\n  { plugins: [highlight()] }\n);\n```\n\nhighlight.js génère des noms de classes préfixés par `hljs`. Utilisez n'importe quel [thème CSS highlight.js](https://highlightjs.org/demo) pour la mise en forme.\n\n### Numéros de ligne\n\nTous les moteurs prennent en charge les numéros de ligne. Activez-les dans les options de compilation :\n\n```ts\n\nconst result = compile(source, {\n  plugins: [treeSitter()],\n  lineNumbers: true,\n});\n```\n\nChaque ligne est enveloppée dans un `<span>` doté d'un attribut `data-line` exploitable 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### Voir aussi\n\n- [syntect()](/docs/packages/node/syntect) - Référence de l'API syntect\n- [createShikiPlugin()](/docs/packages/shiki/create-shiki-plugin) - Référence de l'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"
    }
  ]
}