Next.js 14 - Erweiterte Syntax-/Code-Hervorhebung

Sie können verschiedene Ansätze verwenden, um Codeblöcke in Ihren Blog oder Ihre Website zu integrieren (TailwindCSS, usw.). Ich stieß auf einen modernen Ansatz zur Syntaxhervorhebung und entdeckte Shiki, einen relativ neuen Syntaxhervorhefter, der von Pine Wu entwickelt und von Anthony Fu gepflegt wird. Bedeutende Unternehmen wie Vercel nutzen Shiki für ihre Next.js-Dokumentation und Astro für die Syntaxhervorhebung.

Hier ist das GitHub Repo mit dem gesamten Code und darunter der Link zur Beispielwebsite.

Example page hosted on Vercel -> https://nextjs14-contentful-syntax-highlighting.vercel.app/

Warum Shiki?

Syntaxhervorhebung in Next.js-Anwendungen kann für Techblogs sehr interessant sein. Shiki basiert auf der TextMate-Grammatik, dem gleichen System, das auch von Visual Studio Code verwendet wird, und gewährleistet so eine genaue und visuell ansprechende Codehervorhebung. Noch wichtiger für die Leistung unserer Website ist, dass Shiki den hervorgehobenen Code bereits vor der Zeit rendert. Das bedeutet, dass kein zusätzliches JavaScript für die Syntaxhervorhebung an den Client gesendet wird, was dem Bestreben von Next.js nach Serverkomponenten und minimalem clientseitigem JavaScript entspricht.

Verwendeter Stack

Ich werde mit meinem Standard-Stack beginnen:

• Next.js 14 als Web-Framework, und ich werde die mitgelieferte Middleware Edge-Funktion verwenden

• NPM-Paket Shiki für die Syntaxhervorhebung und das entsprechende Transformers-Paket

• Vercel für das Hosting

Inspiration und ursprüngliche Quelle

Danke an Nikolai Lehbrink für die Inspiration und die ursprüngliche Codequelle, die ich zur Integration in mein Next.js 14-Projekt verwendet habe. Wenn Sie an einer detaillierten Anleitung zur Integration in Next.js 13 interessiert sind -> https://www.nikolailehbr.ink/blog/syntax-highlighting-shiki-next-js

Zwei neue NPM Pakete

Neue Komponente für Syntax Hervorhebung

Jetzt werde ich eine neue Komponente erstellen, die ich auf der Startseite wiederverwenden kann.

Integration der neuen Komponente in die Datei page.tsx

Unterhalb ist die Integration ersichtlich

Nun machen wir es hübsch

Im Moment ist alles fest kodiert, also lassen Sie uns unsere Komponente erweitern, damit sie den Code, die Sprache (lang) und das Theme als Eigenschaften (props) übernimmt.

Übergeben der Parameter an die Datei Page.tsx

Erst schön, jetzt verbessern wir es.

Die Grundfunktionalität ist erledigt. Lassen Sie uns einige Verbesserungen zu unserem Codeblock hinzufügen.

Hervorheben von bestimmten Code-Zeilen

Ich wollte die Implementierung der Zeilenhervorhebung nicht verpassen. Shiki hat ein paar Transformer, die uns dies schnell einrichten lassen. Ich habe bereits das Transformer-Paket und das Shiki-Basispaket installiert. 1. Neuer Import in Zeile 3:

„import { transformerNotationHighlight } from '@shikijs/transformers';“

2. Aktivierung der Transformer unter „lang“ und „theme“:

transformers: [transformerNotationHighlight()],

Anpassen des Code Parameters in der Datei Page.tsx

Ich habe diesen Abschnitt “ // [!code highlight]” am Ende der Code-Zeile hinzugefügt.

Dies fügt die Klasse „has-highlighted“ zum <pre> und die Klasse „highlighted“ zum <span> hinzu. Jetzt ziele ich mit CSS auf die Klasse und style sie entsprechend. Ich werde TailwindCSS (mit seinen beliebigen Werten) verwenden.

Code Anpassungen anzeigen

Um Klassen für hinzugefügte und entfernte Zeilen hinzuzufügen, folgen wir den gleichen Schritten wie oben, jedoch mit einem anderen Transformer namens transformerNotationDiff. Zuerst importierte ich den neuen Transformer und fügte dann den Kommentar // [!code ++] für hinzugefügte Zeilen und den entsprechenden Kommentar // [!code --] für entfernte Zeilen zu Ihrer code-Eigenschaft hinzu.

Neue Style-Klassen “diff remove” und “diff add”

Dies fügt erneut die diff remove und diff add hinzu. Wir können Klassen auf das gerenderte HTML anwenden, um die Komponente später zu stylen.

Hinzufügen von "Dateinamen" und zusätzlichen Styles

Neben der Hervorhebung wollte ich meinen Codekomponenten Dateinamen hinzufügen. Auf diese Weise weiß der Leser immer, zu welcher Datei der angegebene Code gehört. Lassen Sie uns also eine filename-Eigenschaft zu unserer Komponente hinzufügen und einige anfängliche Stile anwenden, um den Effekt zu sehen.

In unserer page.tsx fügen wir das Attribut "filename" hinzu, damit wir es als "Prop" an die Komponente

<Code code="let a = 1 + 4" filename="index.js" />

Integration von Zeilennummern mit TailwindCSS

Eine häufige Ergänzung in einem Codeblock sind Zeilennummern, die die Komponente optisch ansprechender machen und dem Leser gleichzeitig eine Referenz für bestimmte Zeilen im Code geben.

Stylen der Code-Highlights und der Codeunterschiede (Diffs)

Um das Design der einzelnen hervorgehobenen Zeilen zu verbessern, habe ich außerdem die folgenden Stile hinzugefügt.

Anpassen der Datei post.config.js

Sie müssen das Plugin nicht installieren, da es bereits mit TailwindCSS enthalten ist, das bereits installiert wurde.

Endergebnis

Zuletzt habe ich einige Stile hinzugefügt, um die gesamte Syntax-Hervorhebungskomponente optisch ansprechender zu gestalten, und einen Hintergrundverlauf hinzugefügt. Außerdem habe ich eine Funktion zum Kopieren in die Zwischenablage hinzugefügt. Den vollständigen Code finden Sie am Anfang dieser Geschichte unter dem angegebenen Link.

Cloudapp-dev und bevor Sie uns verlassen

Danke, dass Sie bis zum Ende gelesen haben. Noch eine Bitte bevor Sie gehen:

Wenn Ihnen gefallen hat was Sie gelesen haben oder wenn es Ihnen sogar geholfen hat, dann würden wir uns über einen "Clap" 👏 oder einen neuen Follower auf unseren Medium Account sehr freuen.

Oder folgen Sie uns auf Twitter -> Cloudapp.dev