{
  "url": "https://unifast.dev/ru/docs/guides/syntax-highlighting/",
  "locale": "ru",
  "title": "Подсветка синтаксиса",
  "description": "Выбирайте из четырёх движков подсветки синтаксиса в unifast: tree-sitter, syntect, Shiki и highlight.js.",
  "section": "guides",
  "body": "unifast поддерживает четыре движка подсветки синтаксиса. Два работают внутри компилятора на Rust (**tree-sitter**, **syntect**), а два — в JavaScript (**Shiki**, **highlight.js**).\n\n### Сравнение\n\n| | tree-sitter | syntect | Shiki | highlight.js |\n|---|-------------|---------|-------|--------------|\n| **Среда выполнения** | Rust (встроен) | Rust (встроен) | JavaScript | JavaScript |\n| **Парсинг** | На основе AST (грамматики tree-sitter) | На основе регулярных выражений (грамматики TextMate) | На основе регулярных выражений (грамматики VS Code) | На основе регулярных выражений (грамматики highlight.js) |\n| **Скорость** | Самый быстрый | Быстрый | Медленнее | Медленнее |\n| **Языки** | 29 языков + резервный syntect | 100+ (TextMate) | Грамматики VS Code | 190+ |\n| **Вывод CSS** | На основе классов (`ts-*`) | На основе классов (`sy-*`) | Инлайн-стили или на основе классов | На основе классов (`hljs`) |\n| **Пакет** | `@unifast/node` | `@unifast/node` | `@unifast/shiki` | `@unifast/highlight` |\n| **Лучше всего подходит для** | Точной подсветки с широким охватом | Простой настройки, быстрого старта | Тонкого контроля над темой | Экосистемы тем highlight.js |\n\n### Использование tree-sitter\n\ntree-sitter использует парсинг на основе AST для точной подсветки синтаксиса. Он работает внутри компилятора на Rust и нативно поддерживает 29 языков. Для неподдерживаемых языков он автоматически переключается на syntect.\n\ntree-sitter входит в `@unifast/node` — отдельная установка не требуется.\n\n```ts\n\nconst result = compile(\n  '```typescript\\nconst x: number = 42;\\n```',\n  { plugins: [treeSitter()] }\n);\n```\n\ntree-sitter генерирует имена CSS-классов с префиксом `ts-`. Вам нужно предоставить CSS-правила для этих классов в вашем стиле.\n\n#### Поддерживаемые языки\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\nПоддерживаются также алиасы языков (например, `ts`, `py`, `rs`, `sh`, `yml`, `rb`).\n\n### Использование syntect\n\nsyntect использует грамматики TextMate и работает полностью внутри компилятора на Rust — без дополнительных накладных расходов в JavaScript.\n\nsyntect входит в `@unifast/node` — отдельная установка не требуется.\n\n```ts\n\nconst result = compile(\n  '```typescript\\nconst x: number = 42;\\n```',\n  { plugins: [syntect()] }\n);\n```\n\nsyntect генерирует имена CSS-классов с префиксом `sy-`. Вам нужно предоставить CSS-правила для этих классов в вашем стиле.\n\n### Использование Shiki\n\nShiki использует движок грамматик TextMate из VS Code для точной подсветки с поддержкой тем.\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### Использование highlight.js\n\n`@unifast/highlight` использует [lowlight](https://github.com/wooorm/lowlight) (highlight.js) и запускается как HAST-преобразование в JavaScript. Он поддерживает 190+ языков и работает с любой темой highlight.js.\n\n```ts\n\nconst result = compile(\n  '```typescript\\nconst x: number = 42;\\n```',\n  { plugins: [highlight()] }\n);\n```\n\nhighlight.js генерирует имена классов с префиксом `hljs`. Для стилизации используйте любой [CSS-файл темы highlight.js](https://highlightjs.org/demo).\n\n### Номера строк\n\nВсе движки поддерживают номера строк. Включите их в параметрах компиляции:\n\n```ts\n\nconst result = compile(source, {\n  plugins: [treeSitter()],\n  lineNumbers: true,\n});\n```\n\nКаждая строка оборачивается в `<span>` с атрибутом `data-line` для стилизации через 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### Смотрите также\n\n- [syntect()](/docs/packages/node/syntect) — справочник API syntect\n- [createShikiPlugin()](/docs/packages/shiki/create-shiki-plugin) — справочник 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"
    }
  ]
}