{
  "url": "https://unifast.dev/ko/docs/guides/syntax-highlighting/",
  "locale": "ko",
  "title": "구문 강조",
  "description": "unifast의 네 가지 구문 강조 엔진 tree-sitter, syntect, Shiki, highlight.js 중에서 선택할 수 있습니다.",
  "section": "guides",
  "body": "unifast는 네 가지 구문 강조 엔진을 지원합니다. 두 엔진(**tree-sitter**, **syntect**)은 Rust 컴파일러 내부에서 실행되고, 나머지 두 엔진(**Shiki**, **highlight.js**)은 JavaScript에서 실행됩니다.\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는 `ts-` 접두사를 가진 CSS 클래스명을 생성합니다. 스타일시트에 해당 클래스에 대한 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는 `sy-` 접두사를 가진 CSS 클래스명을 생성합니다. 스타일시트에 해당 클래스에 대한 CSS 규칙을 직접 정의해야 합니다.\n\n### Shiki 사용하기\n\nShiki는 VS Code의 TextMate 문법 엔진을 사용하여 테마 지원이 포함된 정확한 강조를 제공합니다.\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)를 사용하며, JavaScript에서 HAST 변환으로 동작합니다. 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` 접두사가 붙은 클래스명을 생성합니다. 스타일링에는 [highlight.js 테마 CSS](https://highlightjs.org/demo)를 자유롭게 사용할 수 있습니다.\n\n### 줄 번호\n\n모든 엔진은 줄 번호를 지원합니다. compile 옵션에서 활성화하세요.\n\n```ts\n\nconst result = compile(source, {\n  plugins: [treeSitter()],\n  lineNumbers: true,\n});\n```\n\n각 줄은 CSS 기반 스타일링을 위해 `data-line` 속성을 가진 `<span>`으로 감싸집니다.\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) - syntect API 레퍼런스\n- [createShikiPlugin()](/docs/packages/shiki/create-shiki-plugin) - Shiki API 레퍼런스",
  "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"
    }
  ]
}