{ "url": "https://unifast.dev/de/docs/guides/syntax-highlighting/", "locale": "de", "title": "Syntax-Hervorhebung", "description": "Wählen Sie in unifast aus vier Engines zur Syntax-Hervorhebung: tree-sitter, syntect, Shiki und highlight.js.", "section": "guides", "body": "unifast unterstützt vier Engines zur Syntax-Hervorhebung. Zwei laufen innerhalb des Rust-Compilers (**tree-sitter**, **syntect**), und zwei laufen in JavaScript (**Shiki**, **highlight.js**).\n\n### Vergleich\n\n| | tree-sitter | syntect | Shiki | highlight.js |\n|---|-------------|---------|-------|--------------|\n| **Laufzeit** | Rust (integriert) | Rust (integriert) | JavaScript | JavaScript |\n| **Parsing** | AST-basiert (tree-sitter-Grammatiken) | Regex-basiert (TextMate-Grammatiken) | Regex-basiert (VS-Code-Grammatiken) | Regex-basiert (highlight.js-Grammatiken) |\n| **Geschwindigkeit** | Am schnellsten | Schnell | Langsamer | Langsamer |\n| **Sprachen** | 29 Sprachen + syntect-Fallback | 100+ (TextMate) | VS-Code-Grammatiken | 190+ |\n| **CSS-Ausgabe** | Klassenbasiert (`ts-*`) | Klassenbasiert (`sy-*`) | Inline-Styles oder klassenbasiert | Klassenbasiert (`hljs`) |\n| **Paket** | `@unifast/node` | `@unifast/node` | `@unifast/shiki` | `@unifast/highlight` |\n| **Am besten geeignet für** | Präzise Hervorhebung, breite Abdeckung | Einfaches Setup, schneller Start | Feingranulare Theme-Steuerung | highlight.js-Theme-Ökosystem |\n\n### tree-sitter verwenden\n\ntree-sitter verwendet AST-basiertes Parsing für präzise Syntax-Hervorhebung. Es läuft innerhalb des Rust-Compilers und unterstützt 29 Sprachen nativ. Für nicht unterstützte Sprachen fällt es automatisch auf syntect zurück.\n\ntree-sitter ist in `@unifast/node` enthalten – eine separate Installation ist nicht erforderlich.\n\n```ts\n\nconst result = compile(\n '```typescript\\nconst x: number = 42;\\n```',\n { plugins: [treeSitter()] }\n);\n```\n\ntree-sitter erzeugt CSS-Klassennamen mit dem Präfix `ts-`. Sie müssen in Ihrem Stylesheet CSS-Regeln für diese Klassen bereitstellen.\n\n#### Unterstützte Sprachen\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\nAuch Sprach-Aliase werden unterstützt (z. B. `ts`, `py`, `rs`, `sh`, `yml`, `rb`).\n\n### syntect verwenden\n\nsyntect verwendet TextMate-Grammatiken und läuft vollständig innerhalb des Rust-Compilers – ohne zusätzlichen JavaScript-Overhead.\n\nsyntect ist in `@unifast/node` enthalten – eine separate Installation ist nicht erforderlich.\n\n```ts\n\nconst result = compile(\n '```typescript\\nconst x: number = 42;\\n```',\n { plugins: [syntect()] }\n);\n```\n\nsyntect erzeugt CSS-Klassennamen mit dem Präfix `sy-`. Sie müssen in Ihrem Stylesheet CSS-Regeln für diese Klassen bereitstellen.\n\n### Shiki verwenden\n\nShiki verwendet die TextMate-Grammatik-Engine von VS Code für präzise Hervorhebung mit Theme-Unterstützung.\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 verwenden\n\n`@unifast/highlight` verwendet [lowlight](https://github.com/wooorm/lowlight) (highlight.js) und läuft als HAST-Transformation in JavaScript. Es unterstützt über 190 Sprachen und funktioniert mit jedem highlight.js-Theme.\n\n```ts\n\nconst result = compile(\n '```typescript\\nconst x: number = 42;\\n```',\n { plugins: [highlight()] }\n);\n```\n\nhighlight.js erzeugt Klassennamen mit dem Präfix `hljs`. Verwenden Sie beliebige [highlight.js-Theme-CSS](https://highlightjs.org/demo) zur Gestaltung.\n\n### Zeilennummern\n\nAlle Engines unterstützen Zeilennummern. Aktivieren Sie diese in den Kompilierungsoptionen:\n\n```ts\n\nconst result = compile(source, {\n plugins: [treeSitter()],\n lineNumbers: true,\n});\n```\n\nJede Zeile wird in ein `` mit einem `data-line`-Attribut für CSS-basiertes Styling eingeschlossen:\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### Siehe auch\n\n- [syntect()](/docs/packages/node/syntect) – syntect-API-Referenz\n- [createShikiPlugin()](/docs/packages/shiki/create-shiki-plugin) – Shiki-API-Referenz", "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" } ] }