---
title: "Verwendung von Transformers für Shiki zur Bereicherung der Syntaxhervorhebung in Astro"
description: "Wie integriere ich gängige Transformatoren für Shiki, um die Syntaxhervorhebung in der Astro-Anwendung zu bereichern?"
source: "https://www.launchfa.st/de/blog/shiki"
author: "Rishi Raj Jain"
created_at: 2024-04-17T00:00:00.000Z
---
> **Site index for agents**
> Fetch https://www.launchfa.st/llms.txt to discover every page on this site.
> Every page is also available as Markdown by appending `.md` to its URL.
In dieser Anleitung erfahren Sie, wie Sie Transformer für den Shiki-Syntax-Highlighter in einer Astro-Anwendung verwenden. Sie werden den Prozess des Einrichtens eines neuen Astro-Projekts, der Installation der Transformer für Shiki und der Darstellung von Code-Hinzufügungen und -Löschungen durchlaufen. Außerdem erfahren Sie, wie um bestimmte Linien optisch ansprechend hervorzuheben
## Voraussetzungen
Sie benötigen Folgendes:
- [Nodejs 18](https://nodejs.org/en/blog/announcements/v20-release-announce) oder höher
## Inhaltsverzeichnis
- [Eine neue Astro-Anwendung erstellen](#create-a-new-astro-application)
- [Integrieren Sie Transformers für Shiki in Ihr Astro-Projekt](#integrate-transformers-for-shiki-in-your-astro-project)
- [Transformers für Shiki installieren](#install-transformers-for-shiki)
- [Ladetransformatoren für Shiki in der Astro-Konfiguration](#load-transformers-for-shiki-in-astro-configuration)
- [Erstellen und testen Sie Ihre Astro-Anwendung lokal](#build-and-test-your-astro-application-locally)
## Erstellen Sie eine neue Astro-Anwendung
Beginnen wir mit der Erstellung eines neuen Astro-Projekts. Führen Sie den folgenden Befehl aus:
```bash
npm create astro@latest my-app
```
„npm create astro“ ist die empfohlene Methode, um ein Astro-Projekt schnell zu erstellen
Wenn Sie dazu aufgefordert werden, wählen Sie:
- „Leer“, wenn Sie gefragt werden, wie das neue Projekt gestartet werden soll
- „Ja“, wenn Sie gefragt werden, ob Sie Typescript schreiben möchten
- „Streng“, wenn Sie gefragt werden, wie streng Typescript sein soll
- „Ja“, wenn Sie aufgefordert werden, Abhängigkeiten zu installieren
– „Ja“, wenn Sie aufgefordert werden, ein Git-Repository zu initialisieren
Sobald das erledigt ist, können Sie in das Projektverzeichnis wechseln und die App starten:
```bash
cd my-app
npm run dev
```
Die App sollte auf [localhost:4321](http://localhost:4321/) ausgeführt werden.
Kommen wir nun zur Integration von Transformatoren für Shiki in Ihre Astro-Anwendung
## Integrieren Sie Transformers für Shiki in Ihr Astro-Projekt
### Transformers für Shiki installieren
Führen Sie den folgenden Befehl aus, um das erforderliche Paket für die Verwendung von Transformatoren für Shiki zu installieren:
```bash
npm install @shikijs/transformers
```
Der Befehl installiert die folgende Bibliothek:
- „@shikijs/transformers“: Eine Sammlung von Transformatoren für Shiki
Dies ist die einzige Bibliothek, die erforderlich ist, um Code optisch ansprechend darzustellen. Aktualisieren wir unsere Astro-Konfiguration, um diese Transformatoren zu laden
### Transformatoren für Shiki in der Astro-Konfiguration laden
Um die Transformatoren für Shiki in Aktion zu sehen, importieren Sie Folgendes in Ihre Astro-Konfigurationsdatei („astroconfigmjs“).
- „transformerNotationDiff“: Ermöglicht die Darstellung einer **Änderung** in einer Codezeile
- „transformerMetaHighlight“: Ermöglicht das **Hervorheben** einer Codezeile
- „transformerNotationFocus“: Ermöglicht das **Fokussieren** einer Codezeile
```tsx {2-6,9-19}
import { defineConfig } from 'astro/config'
import {
transformerNotationDiff,
transformerNotationFocus,
transformerMetaHighlight
} from '@shikijs/transformers'
export default defineConfig({
markdown: {
syntaxHighlight: 'shiki',
shikiConfig: {
theme: 'github-dark',
transformers: [
transformerNotationDiff(),
transformerNotationFocus(),
transformerMetaHighlight(),
],
},
},
})
```
Um die Verwendung dieser Transformatoren zu demonstrieren, erstellen Sie eine Markdown-Datei im Verzeichnis „src/content/blog“. Erstellen wir eine „samplemd“ im Verzeichnis („src/content/blog“) mit folgendem Inhalt:
```markdown
---
slug: 'sample'
title: 'Sample Title'
description: 'Sample Description'
created_at: 2024-04-15T00:00:00.000+00:00
---
```tsx
consolelog("Einführung")
consolelog("Subtraction") // [!code focus] // [!code --]
consolelog("Addition") // [!code focus] // [!code ++]
consolelog("Im Fokus") // [!code focus]
consolelog("Ende")
```
```
Im Markdown sehen Sie, dass die Zeilen, die anders dargestellt werden müssen, kommentarähnliche Zeichenfolgen enthalten. Hier sind diese drei Zeichenfolgen:
- `// [!code --]`: Ermöglicht die Angabe, welche Zeile als Löschung dargestellt werden soll
- `// [!code ++]`: Ermöglicht die Angabe, welche Zeile als Zusatz dargestellt werden soll
- `// [!code focus]`: Ermöglicht Ihnen festzulegen, welche Zeile im Fokus stehen soll. Dies geschieht durch Unschärfe der restlichen Zeilen im Code
Diese spezifischen Zeichenfolgen geben eine CSS-Klasse mit der Zeile aus, die wir selbst definieren müssen. Definieren wir das bestimmte erforderliche CSS in der Datei „src/pages/indexastro“:
```astro {12-39}
---
// File: src/pages/index.astro // [!code focus]
---
// [!code focus]
Astro
Astro
```
Im Grunde genommen haben Sie eine Reihe von Klassen hinzugefügt, die festlegen, wie eine hinzugefügte, entfernte oder fokussierte Linie aussehen soll. Rendern Sie nun den Markdown mithilfe der standardmäßigen Shiki-Syntaxhervorhebung in AstroNehmen Sie dazu folgende Ergänzungen in der Indexroute vor:
```astro {4,5,46}
---
// File: src/pages/index.astro // [!code focus]
const blogData = await Astro.glob('../content/blog/sample.md') // [!code focus]
const markdown = await blogData[0].compiledContent()
---
Astro
Astro
```
und du bist fertig! Wie Sie in diesem Blog selbst gesehen haben, können Sie eine optisch ansprechende Darstellung des Hinzufügens und Löschens von Code sehen
## Erstellen und testen Sie Ihre Astro-Anwendung lokal
Um die Anwendung zu testen, bereiten Sie einen Build vor und führen Sie den Vorschauserver mit dem folgenden Befehl aus:
```bash
npm run build && npm run preview
```
## Abschluss
In diesem Leitfaden haben Sie erfahren, wie Sie Transformers for Shiki in einer Astro-Anwendung verwenden, um sich auf bestimmte Codezeilen zu konzentrieren und Code-Hinzufügungen und -Löschungen optisch ansprechend hervorzuheben
Wenn Sie Fragen oder Kommentare haben, können Sie mich gerne auf [Twitter](https://twitter.com/direct_messages/create/rishi_raj_jain_).
In dieser Anleitung erfahren Sie, wie Sie Transformer für den Shiki-Syntax-Highlighter in einer Astro-Anwendung verwenden. Sie werden den Prozess des Einrichtens eines neuen Astro-Projekts, der Installation der Transformer für Shiki und der Darstellung von Code-Hinzufügungen und -Löschungen durchlaufen. Außerdem erfahren Sie, wie um bestimmte Linien optisch ansprechend hervorzuheben
## Voraussetzungen
Sie benötigen Folgendes:
- [Nodejs 18](https://nodejs.org/en/blog/announcements/v20-release-announce) oder höher
## Inhaltsverzeichnis
- [Eine neue Astro-Anwendung erstellen](#create-a-new-astro-application)
- [Integrieren Sie Transformers für Shiki in Ihr Astro-Projekt](#integrate-transformers-for-shiki-in-your-astro-project)
- [Transformers für Shiki installieren](#install-transformers-for-shiki)
- [Ladetransformatoren für Shiki in der Astro-Konfiguration](#load-transformers-for-shiki-in-astro-configuration)
- [Erstellen und testen Sie Ihre Astro-Anwendung lokal](#build-and-test-your-astro-application-locally)
## Erstellen Sie eine neue Astro-Anwendung
Beginnen wir mit der Erstellung eines neuen Astro-Projekts. Führen Sie den folgenden Befehl aus:
```bash
npm create astro@latest my-app
```
„npm create astro“ ist die empfohlene Methode, um ein Astro-Projekt schnell zu erstellen
Wenn Sie dazu aufgefordert werden, wählen Sie:
- „Leer“, wenn Sie gefragt werden, wie das neue Projekt gestartet werden soll
- „Ja“, wenn Sie gefragt werden, ob Sie Typescript schreiben möchten
- „Streng“, wenn Sie gefragt werden, wie streng Typescript sein soll
- „Ja“, wenn Sie aufgefordert werden, Abhängigkeiten zu installieren
– „Ja“, wenn Sie aufgefordert werden, ein Git-Repository zu initialisieren
Sobald das erledigt ist, können Sie in das Projektverzeichnis wechseln und die App starten:
```bash
cd my-app
npm run dev
```
Die App sollte auf [localhost:4321](http://localhost:4321/) ausgeführt werden.
Kommen wir nun zur Integration von Transformatoren für Shiki in Ihre Astro-Anwendung
## Integrieren Sie Transformers für Shiki in Ihr Astro-Projekt
### Transformers für Shiki installieren
Führen Sie den folgenden Befehl aus, um das erforderliche Paket für die Verwendung von Transformatoren für Shiki zu installieren:
```bash
npm install @shikijs/transformers
```
Der Befehl installiert die folgende Bibliothek:
- „@shikijs/transformers“: Eine Sammlung von Transformatoren für Shiki
Dies ist die einzige Bibliothek, die erforderlich ist, um Code optisch ansprechend darzustellen. Aktualisieren wir unsere Astro-Konfiguration, um diese Transformatoren zu laden
### Transformatoren für Shiki in der Astro-Konfiguration laden
Um die Transformatoren für Shiki in Aktion zu sehen, importieren Sie Folgendes in Ihre Astro-Konfigurationsdatei („astroconfigmjs“).
- „transformerNotationDiff“: Ermöglicht die Darstellung einer **Änderung** in einer Codezeile
- „transformerMetaHighlight“: Ermöglicht das **Hervorheben** einer Codezeile
- „transformerNotationFocus“: Ermöglicht das **Fokussieren** einer Codezeile
```tsx {2-6,9-19}
import { defineConfig } from 'astro/config'
import {
transformerNotationDiff,
transformerNotationFocus,
transformerMetaHighlight
} from '@shikijs/transformers'
export default defineConfig({
markdown: {
syntaxHighlight: 'shiki',
shikiConfig: {
theme: 'github-dark',
transformers: [
transformerNotationDiff(),
transformerNotationFocus(),
transformerMetaHighlight(),
],
},
},
})
```
Um die Verwendung dieser Transformatoren zu demonstrieren, erstellen Sie eine Markdown-Datei im Verzeichnis „src/content/blog“. Erstellen wir eine „samplemd“ im Verzeichnis („src/content/blog“) mit folgendem Inhalt:
```markdown
---
slug: 'sample'
title: 'Sample Title'
description: 'Sample Description'
created_at: 2024-04-15T00:00:00.000+00:00
---
```tsx
consolelog("Einführung")
consolelog("Subtraction") // [!code focus] // [!code --]
consolelog("Addition") // [!code focus] // [!code ++]
consolelog("Im Fokus") // [!code focus]
consolelog("Ende")
```
```
Im Markdown sehen Sie, dass die Zeilen, die anders dargestellt werden müssen, kommentarähnliche Zeichenfolgen enthalten. Hier sind diese drei Zeichenfolgen:
- `// [!code --]`: Ermöglicht die Angabe, welche Zeile als Löschung dargestellt werden soll
- `// [!code ++]`: Ermöglicht die Angabe, welche Zeile als Zusatz dargestellt werden soll
- `// [!code focus]`: Ermöglicht Ihnen festzulegen, welche Zeile im Fokus stehen soll. Dies geschieht durch Unschärfe der restlichen Zeilen im Code
Diese spezifischen Zeichenfolgen geben eine CSS-Klasse mit der Zeile aus, die wir selbst definieren müssen. Definieren wir das bestimmte erforderliche CSS in der Datei „src/pages/indexastro“:
```astro {12-39}
---
// File: src/pages/index.astro // [!code focus]
---
// [!code focus]