Подсветка синтаксиса

Выбирайте из четырёх движков подсветки синтаксиса в unifast: tree-sitter, syntect, Shiki и highlight.js.

unifast поддерживает четыре движка подсветки синтаксиса. Два работают внутри компилятора на Rust (tree-sitter, syntect), а два — в JavaScript (Shiki, highlight.js).

Сравнение

tree-sittersyntectShikihighlight.js
Среда выполненияRust (встроен)Rust (встроен)JavaScriptJavaScript
ПарсингНа основе AST (грамматики tree-sitter)На основе регулярных выражений (грамматики TextMate)На основе регулярных выражений (грамматики VS Code)На основе регулярных выражений (грамматики highlight.js)
СкоростьСамый быстрыйБыстрыйМедленнееМедленнее
Языки29 языков + резервный syntect100+ (TextMate)Грамматики VS Code190+
Вывод CSSНа основе классов (ts-*)На основе классов (sy-*)Инлайн-стили или на основе классовНа основе классов (hljs)
Пакет@unifast/node@unifast/node@unifast/shiki@unifast/highlight
Лучше всего подходит дляТочной подсветки с широким охватомПростой настройки, быстрого стартаТонкого контроля над темойЭкосистемы тем highlight.js

Использование tree-sitter

tree-sitter использует парсинг на основе AST для точной подсветки синтаксиса. Он работает внутри компилятора на Rust и нативно поддерживает 29 языков. Для неподдерживаемых языков он автоматически переключается на syntect.

tree-sitter входит в @unifast/node — отдельная установка не требуется.

import { compile, treeSitter } from "@unifast/node";

const result = compile(
  '```typescript\nconst x: number = 42;\n```',
  { plugins: [treeSitter()] }
);

tree-sitter генерирует имена CSS-классов с префиксом ts-. Вам нужно предоставить CSS-правила для этих классов в вашем стиле.

Поддерживаемые языки

TypeScript, 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

Поддерживаются также алиасы языков (например, ts, py, rs, sh, yml, rb).

Использование syntect

syntect использует грамматики TextMate и работает полностью внутри компилятора на Rust — без дополнительных накладных расходов в JavaScript.

syntect входит в @unifast/node — отдельная установка не требуется.

import { compile, syntect } from "@unifast/node";

const result = compile(
  '```typescript\nconst x: number = 42;\n```',
  { plugins: [syntect()] }
);

syntect генерирует имена CSS-классов с префиксом sy-. Вам нужно предоставить CSS-правила для этих классов в вашем стиле.

Использование Shiki

Shiki использует движок грамматик TextMate из VS Code для точной подсветки с поддержкой тем.

import { compile } from "@unifast/node";
import { createShikiPlugin } from "@unifast/shiki";

const shiki = await createShikiPlugin({
  theme: "github-dark",
  langs: ["typescript", "rust", "bash"],
});

const result = compile(
  '```typescript\nconst x: number = 42;\n```',
  { plugins: [shiki] }
);

Использование highlight.js

@unifast/highlight использует lowlight (highlight.js) и запускается как HAST-преобразование в JavaScript. Он поддерживает 190+ языков и работает с любой темой highlight.js.

import { compile } from "@unifast/node";
import { highlight } from "@unifast/highlight";

const result = compile(
  '```typescript\nconst x: number = 42;\n```',
  { plugins: [highlight()] }
);

highlight.js генерирует имена классов с префиксом hljs. Для стилизации используйте любой CSS-файл темы highlight.js.

Номера строк

Все движки поддерживают номера строк. Включите их в параметрах компиляции:

import { compile, treeSitter } from "@unifast/node";

const result = compile(source, {
  plugins: [treeSitter()],
  lineNumbers: true,
});

Каждая строка оборачивается в <span> с атрибутом data-line для стилизации через CSS:

[data-line]::before {
  content: attr(data-line);
  display: inline-block;
  width: 2rem;
  text-align: right;
  margin-right: 1rem;
  color: #6b7280;
}

Смотрите также