{
  "url": "https://unifast.dev/ja/docs/guides/syntax-highlighting/",
  "locale": "ja",
  "title": "シンタックスハイライト",
  "description": "unifast で利用できる 4 つのシンタックスハイライトエンジン (tree-sitter、syntect、Shiki、highlight.js) から選択します。",
  "section": "guides",
  "body": "unifast は 4 つのシンタックスハイライトエンジンをサポートしています。そのうち 2 つ (**tree-sitter**、**syntect**) は Rust コンパイラ内部で動作し、残りの 2 つ (**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すべてのエンジンが行番号に対応しています。コンパイルオプションで有効にできます。\n\n```ts\n\nconst result = compile(source, {\n  plugins: [treeSitter()],\n  lineNumbers: true,\n});\n```\n\n各行は `data-line` 属性を持つ `<span>` でラップされ、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) - 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"
    }
  ]
}