Verwendung von Transformers für Shiki zur Bereicherung der Syntaxhervorhebung in Astro

Using GreenSock Animation Platform (GSAP) in Astro: A Step-by-Step Guide

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 oder höher

Inhaltsverzeichnis

Eine neue Astro-Anwendung erstellen
Integrieren Sie Transformers für Shiki in Ihr Astro-Projekt
- Transformers für Shiki installieren
- Ladetransformatoren für Shiki in der Astro-Konfiguration
Erstellen und testen Sie Ihre Astro-Anwendung lokal

Erstellen Sie eine neue Astro-Anwendung

Beginnen wir mit der Erstellung eines neuen Astro-Projekts. Führen Sie den folgenden Befehl aus:

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:

cd my-app
npm run dev

Die App sollte auf 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:

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

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:

---
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“:

---
// File: src/pages/index.astro // [!code focus]
---
// [!code focus]
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
    <style is:global>
      .line {
        display: inline;
        padding-bottom: 0;
      }
      .diff {
        display: inline-block;
        width: 100vw;
        margin: 0 -12px;
        padding: 0 12px;
      }
      .diff.add {
        background-color: #0505;
      }
      .diff.remove {
        background-color: #8005;
      }
      .diff:before {
        position: absolute;
        left: 40px;
      }
      .has-focused .line {
        filter: blur(0.095rem);
      }
      .has-focused .focused {
        filter: blur(0);
      }
    </style>
  </head>
  <body>
    <h1>Astro<h1/>
  </body>
</html>

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:

---
// File: src/pages/index.astro // [!code focus]

const blogData = await Astro.glob('../content/blog/sample.md') // [!code focus]
const markdown = await blogData[0].compiledContent()
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
    <style is:global>
      .line {
        display: inline;
        padding-bottom: 0;
      }
      .diff {
        display: inline-block;
        width: 100vw;
        margin: 0 -12px;
        padding: 0 12px;
      }
      .diff.add {
        background-color: #0505;
      }
      .diff.remove {
        background-color: #8005;
      }
      .diff:before {
        position: absolute;
        left: 40px;
      }
      .has-focused .line {
        filter: blur(0.095rem);
      }
      .has-focused .focused {
        filter: blur(0);
      }
    </style>
  </head>
  <body>
    <h1>Astro<h1/>
    <article set:html={markdown} />
  </body>
</html>

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:

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.