Sözdizimi Vurgulama

unifast dört sözdizimi vurgulama motorunu destekler. İkisi Rust derleyicisinin içinde çalışır (tree-sitter, syntect), ikisi ise JavaScript’te çalışır (Shiki, highlight.js).

Karşılaştırma

tree-sitter Kullanımı

tree-sitter, kesin sözdizimi vurgulaması için AST tabanlı ayrıştırma kullanır. Rust derleyicisinin içinde çalışır ve 29 dili yerel olarak destekler. Desteklenmeyen diller için otomatik olarak syntect’e geri döner.

tree-sitter @unifast/node içinde yer alır — ayrı bir kurulum gerekmez.

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

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

tree-sitter, ts- önekli CSS sınıf adları üretir. Stil sayfanızda bu sınıflar için CSS kuralları sağlamanız gerekir.

Desteklenen diller

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

Dil takma adları da desteklenir (örn. ts, py, rs, sh, yml, rb).

syntect Kullanımı

syntect, TextMate gramerini kullanır ve tamamen Rust derleyicisinin içinde çalışır — ek JavaScript yükü yoktur.

syntect @unifast/node içinde yer alır — ayrı bir kurulum gerekmez.

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

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

syntect, sy- önekli CSS sınıf adları üretir. Stil sayfanızda bu sınıflar için CSS kuralları sağlamanız gerekir.

Shiki Kullanımı

Shiki, tema desteğiyle doğru vurgulama için VS Code’un TextMate gramer motorunu kullanır.

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 Kullanımı

@unifast/highlight, lowlight (highlight.js) kullanır ve JavaScript’te bir HAST dönüşümü olarak çalışır. 190+ dili destekler ve herhangi bir highlight.js temasıyla çalışır.

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

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

highlight.js, hljs önekli sınıf adları üretir. Stil için herhangi bir highlight.js tema CSS’i kullanın.

Satır Numaraları

Tüm motorlar satır numaralarını destekler. Bunları derleme seçeneklerinde etkinleştirin:

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

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

Her satır, CSS tabanlı stil için bir data-line özniteliğiyle bir <span> içine sarmalanır:

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

Ayrıca Bakın

• syntect() - syntect API referansı

• createShikiPlugin() - Shiki API referansı