구문 강조

unifast의 네 가지 구문 강조 엔진 tree-sitter, syntect, Shiki, highlight.js 중에서 선택할 수 있습니다.

unifast는 네 가지 구문 강조 엔진을 지원합니다. 두 엔진(tree-sitter, syntect)은 Rust 컴파일러 내부에서 실행되고, 나머지 두 엔진(Shiki, highlight.js)은 JavaScript에서 실행됩니다.

비교

tree-sittersyntectShikihighlight.js
런타임Rust (빌트인)Rust (빌트인)JavaScriptJavaScript
파싱 방식AST 기반 (tree-sitter 문법)정규식 기반 (TextMate 문법)정규식 기반 (VS Code 문법)정규식 기반 (highlight.js 문법)
속도가장 빠름빠름느림느림
언어29개 언어 + syntect 폴백100+ (TextMate)VS Code 문법190+
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는 ts- 접두사를 가진 CSS 클래스명을 생성합니다. 스타일시트에 해당 클래스에 대한 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는 sy- 접두사를 가진 CSS 클래스명을 생성합니다. 스타일시트에 해당 클래스에 대한 CSS 규칙을 직접 정의해야 합니다.

Shiki 사용하기

Shiki는 VS Code의 TextMate 문법 엔진을 사용하여 테마 지원이 포함된 정확한 강조를 제공합니다.

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)를 사용하며, JavaScript에서 HAST 변환으로 동작합니다. 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 접두사가 붙은 클래스명을 생성합니다. 스타일링에는 highlight.js 테마 CSS를 자유롭게 사용할 수 있습니다.

줄 번호

모든 엔진은 줄 번호를 지원합니다. compile 옵션에서 활성화하세요.

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

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

각 줄은 CSS 기반 스타일링을 위해 data-line 속성을 가진 <span>으로 감싸집니다.

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

함께 보기