So fügen Sie Code-Blöcke in Ihrer React-App hinzu

In der Webentwicklung ist die Anzeige von Codeblöcken mit der richtigen Formatierung und Hervorhebung eine häufige Anforderung. Codeblöcke sind ein vielseitiges Werkzeug, das für eine Vielzahl von Zwecken verwendet werden kann, einschließlich der Anzeige von Code und der Verbesserung der Benutzerinteraktion.

Installieren der Bibliothek

Erste, Erstellen Sie eine React-App und installiere die Reagieren-Code-Blöcke Bibliothek. Diese Bibliothek wird verwendet, um Codeblöcke in Ihrer App anzuzeigen. Sie können diese Bibliothek mit npm, dem Paketmanager für Node.js, installieren. Öffnen Sie Ihr Terminal und navigieren Sie zu Ihrem Projektverzeichnis. Führen Sie dann den folgenden Befehl aus:

npm installiere React-Code-Blöcke

Dadurch wird die React-Code-Blocks-Bibliothek in Ihrem Projekt installiert.

Hinzufügen des Codeblocks zu Ihrem Projekt

Sobald Sie die React-Code-Blocks-Bibliothek installiert haben, können Sie loslegen. Importieren Sie zunächst die

CodeBlock Komponente aus der React-Code-Blocks-Bibliothek in Ihrer App. Sie können dies tun, indem Sie Ihrer Datei den folgenden Code hinzufügen:

importieren { Codeblock } aus"Reagieren-Code-Blöcke";

Verwenden Sie dann die CodeBlock-Komponente in Ihrer App, indem Sie den folgenden Code hinzufügen:

 text='console.log("Hallo Welt!");'
 Sprache='javascript'
 showLineNumbers={WAHR}
 theme={deinThema}
/>

Im obigen Code übergeben Sie mehrere Requisiten an die CodeBlock-Komponente. Hier ist eine Liste aller verfügbaren Requisiten:

• Text (erforderlich): Der Code, der im Codeblock angezeigt werden soll.
• Sprache (erforderlich): Die Programmiersprache des Codes. Dies dient für Syntaxhervorhebung des Codeblocks.
• Zeilennummern anzeigen: Ein boolescher Wert, der angibt, ob Zeilennummern im Codeblock angezeigt werden sollen oder nicht. Es ist standardmäßig falsch.
• Thema: Das Design, das für den Codeblock verwendet werden soll. Dies kann ein integriertes Design oder ein benutzerdefiniertes Designobjekt sein. Es ist standardmäßig GitHub.
• Startliniennummer: Die Zeilennummer, ab der die Zählung beginnen soll. Es ist standardmäßig auf 1.
• codeBlock: Ein Objekt, das Optionen für den Codeblock enthält. Dies kann umfassen Linien Nummern (ein boolescher Wert, der angibt, ob Zeilennummern angezeigt werden sollen oder nicht) und WrapLines (ein boolescher Wert, der angibt, ob Zeilen umgebrochen werden sollen oder nicht).
• onClick: Eine Funktion, die aufgerufen wird, wenn auf den Codeblock geklickt wird.

Hier ist ein Beispiel für die Verwendung all dieser Requisiten:

importieren { Codeblock } aus"Reagieren-Code-Blöcke";
FunktionMeineKomponente() {
konst handleClick = () => {
Konsole.Protokoll(„Codeblock angeklickt“);
 };
zurückkehren (
 text='Const Greeting = "Hallo, Welt!"; console.log (Begrüßung);'
 Sprache='javascript'
 showLineNumbers={WAHR}
 thema ='atom-eins-dunkel'
 Startzeilennummer={10}
 codeBlock={{ Linien Nummern: FALSCH, WrapLines: WAHR }}
 onClick={handleClick}
 />
 );
}

Im obigen Code verwenden Sie Atom-Eins-Dunkel Design, Beginn der Zeilennummern bei 10, Deaktivieren der Zeilennummern, Aktivieren des Zeilenumbruchs und Anhängen eines Click-Handlers.

Durch die Verwendung dieser Requisiten können Sie das Erscheinungsbild und Verhalten Ihrer Codeblöcke an Ihre Bedürfnisse anpassen.

Themen in Ihren Code-Blöcken hinzufügen

Die React-Code-Blocks-Bibliothek bietet eine Vielzahl integrierter Designs, mit denen Sie das Erscheinungsbild Ihrer Codeblöcke anpassen können. Um ein integriertes Design zu verwenden, müssen Sie lediglich den Namen des Designs in der angeben Thema Stütze. Zum Beispiel, um die zu verwenden Atom-Eins-Dunkel Thema verwenden Sie den folgenden Code:

 text='console.log("Hallo Welt!");'
 Sprache='javascript'
 showLineNumbers={WAHR}
 thema ='atom-eins-dunkel'
/>

Zusätzlich zu den integrierten Designs können Sie auch benutzerdefinierte Designs erstellen, indem Sie ein JavaScript-Objekt definieren, das die Farben angibt, die für verschiedene Teile des Codeblocks verwendet werden sollen. Hier ist ein Beispiel dafür, wie ein benutzerdefiniertes Designobjekt aussehen könnte:

konst myCustomTheme = {
 LiniennummerFarbe: "#ccc",
 lineNumberBgColor: "#222",
 Hintergrundfarbe: "#222",
 Textfarbe: "#ccc",
 substringColor: "#00ff00",
 Stichwort Farbe: "#0077ff",
 AttributFarbe: "#ffaa00",
 selectorTagColor: "#0077ff",
 docTagColor: "#aa00ff",
 nameFarbe: "#f8f8f8",
 BuiltInColor: "#0077ff",
 wörtliche Farbe: "#ffaa00",
 bulletFarbe: "#ffaa00",
 CodeFarbe: "#ccc",
 zusätzlichFarbe: "#00ff00",
 regulärer AusdruckFarbe: "#f8f8f8",
 symbolFarbe: "#ffaa00",
 variableFarbe: "#ffaa00",
 TemplateVariableFarbe: "#ffaa00",
 Verknüpfungsfarbe: "#aa00ff",
 selectorAttributeColor: "#ffaa00",
 SelektorPseudoFarbe: "#aa00ff",
 TypFarbe: "#0077ff",
 Saitenfarbe: "#00ff00",
 selectorIdColor: "#ffaa00",
 ZitatFarbe: "#f8f8f8",
 templateTagColor: "#ccc",
 LöschungFarbe: "#ff0000",
 TitelFarbe: "#0077ff",
 AbschnittFarbe: "#0077ff",
 KommentarFarbe: "#777",
 metaKeywordColor: "#f8f8f8",
 metaFarbe: "#aa00ff",
 FunktionFarbe: "#0077ff",
 NummerFarbe: "#ffaa00",
};

Um ein benutzerdefiniertes Design zu verwenden, würden Sie das Designobjekt als Designprop der CodeBlock-Komponente übergeben:

 text='console.log("Hallo Welt!");'
 Sprache='javascript'
 showLineNumbers={WAHR}
 theme={myCustomTheme}
/>

Unten ist die Ausgabe:

Durch die Verwendung integrierter und benutzerdefinierter Designs können Sie das Erscheinungsbild Ihrer Codeblöcke an Ihre Anforderungen und das Gesamtdesign Ihrer App anpassen.

Hinzufügen von CopyBlock zu Ihrem Projekt

Wenn Sie die Kopierfunktion zu Ihren Codeblöcken hinzufügen möchten, können Sie die CopyBlock Komponente, die von der React-Code-Blocks-Bibliothek bereitgestellt wird. Um diese Komponente verwenden zu können, müssen Sie die Reagieren-Kopieren-in-Zwischenablage Bibliothek ebenso. So fügen Sie Ihrem Projekt die CopyBlock-Komponente hinzu:

Installiere das Reagieren-Kopieren-in-Zwischenablage Bibliothek:

npm installieren reagieren-kopieren-in-die-zwischenablage

Importieren Sie die erforderlichen Komponenten und Bibliotheken:

importieren { CopyBlock } aus'react-code-blocks';
importieren { FaCopy } aus'react-icons/fa';
importieren Kopieren aus'in die Zwischenablage kopieren';

Verwenden Sie die CopyBlock-Komponente in Ihrem Code:

konst Code = 'console.log("Hallo Welt!");';
konst Sprache = 'javascript';
 text={code}
 Sprache={Sprache}
 showLineNumbers={WAHR}
 WrapLines={WAHR}
 thema ='dracula'
 codeBlock
 Symbol={}
 onCopy={() => kopieren (Code)}
/>

Unten ist die Ausgabe:

Indem Sie die CopyBlock-Komponente zu Ihrem Projekt hinzufügen, können Sie Benutzern ganz einfach erlauben, den Code aus Ihren Codeblöcken in ihre Zwischenablage zu kopieren.

Alternative Methoden zum Hinzufügen von Codeblöcken

Während die Verwendung der React-Code-Blocks-Bibliothek der einfachste Weg ist, Codeblöcke zu Ihrer React-App hinzuzufügen, gibt es auch einige alternative Methoden, die Sie verwenden können:

1. Syntaxhervorhebung manuell hinzufügen: Wenn Sie keine Bibliothek verwenden möchten, können Sie Ihrem Code manuell Syntaxhervorhebung hinzufügen mit Tailwind-CSS oder normales CSS. Dazu gehört das Hinzufügen von CSS-Klassen zu Ihren Codeelementen, um die entsprechenden Stile anzuwenden. Diese Methode gibt Ihnen zwar mehr Kontrolle über die Stile, kann aber zeitaufwändig bei der Einrichtung und Verwaltung sein.
2. Verwendung anderer Bibliotheken: Es sind mehrere andere Bibliotheken verfügbar, die Syntaxhervorhebung für Code bereitstellen, wie z Reagieren-Syntax-Highlighter, Prisma-Reaktions-Renderer, Und Highlight.js. Diese Bibliotheken haben unterschiedliche Funktionen und Stile, sodass Sie eine auswählen können, die Ihren Anforderungen entspricht.

Während die React-Code-Blocks-Bibliothek für die meisten Anwendungen eine gute Wahl ist, können diese alternativen Methoden in bestimmten Situationen nützlich sein. Letztendlich hängt die von Ihnen gewählte Methode von Ihren spezifischen Bedürfnissen und Vorlieben ab.

Verbessern Sie die Benutzerinteraktion mit Code-Blöcken

Durch die Verwendung von Codeblöcken zum Erklären von Code, Bereitstellen interaktiver Codierungsbeispiele und visuelles Erstellen ansprechende Designs können Sie die Erfahrung Ihrer Benutzer verbessern und sie mit Ihrer Website beschäftigen oder halten Anwendung. Darüber hinaus können Sie Ihre React-App durch die Verwendung von Funktionen wie CopyBlock und benutzerdefinierten Themen noch funktionaler und attraktiver gestalten.