So fügen Sie einem Codeblock in React Syntaxhervorhebung hinzu

Eines der Hauptmerkmale eines Programmierblogs sind Codeblöcke. Sie müssen sie nicht mit einem Syntax-Highlighter formatieren, aber es lässt Ihre Blogs viel schöner aussehen, wenn Sie dies tun. Es kann auch die Lesbarkeit Ihres Codes verbessern.

Dieser Artikel zeigt Ihnen, wie Sie den React-Syntax-Highlighter verwenden, um Codeblöcke in React hervorzuheben. Sie erstellen eine Codeblockkomponente, die in der Lage ist, an sie übergebenen Code mit der Syntax der bereitgestellten Sprache hervorzuheben.

Syntaxhervorhebung Mit React-Syntax-Highlighter

Der React-Syntax-Highlighter ermöglicht es Ihnen, Code mit React hervorzuheben. im Gegensatz zu anderen Syntax-Highlighterverwendet, ist „react-syntax-highlighter“ nicht auf „ComponentDidUpdate“ oder „ComponentDidMount“ angewiesen, um den hervorgehobenen Code mithilfe von „gefährlichSetInnerHTML“ in das DOM einzufügen.

Dieser Ansatz ist gefährlich, weil er eine Anwendung aussetzt Cross-Site-Scripting-Angriffe.

Stattdessen verwendet es einen Syntaxbaum, um das virtuelle DOM zu erstellen, und aktualisiert es nur bei Änderungen.

Die Komponente verwendet PrismJS und Highlight.js im Hintergrund. Sie können beide verwenden, um Ihren Code hervorzuheben. Es ist sehr einfach zu bedienen, da es ein Out-of-the-Box-Styling bietet.

Die Komponente „react-syntax-highlighter“ akzeptiert den Code, die Sprache und den Stil als Requisiten. Die Komponente akzeptiert auch andere Anpassungsoptionen. Sie finden sie im Dokumentation zum Syntax-Highlighter reagieren.

Verwenden der React-Syntax-Highlighter-Komponente

Um den Syntax-Highlighter von React in React zu verwenden, installieren Sie ihn über npm.

npm Installieren Reagieren-Syntax-Highlighter --sparen

Erstellen Sie eine neue Komponente namens CodeBlock.js in Ihrer React-Anwendung und importieren Sie sie Reagieren-Syntax-Highlighter:

importieren SyntaxHighlighter aus 'reagieren-syntax-highlighter';
importieren {Dokko} aus 'react-syntax-highlighter/dist/esm/styles/hljs';
konst CodeBlock = ({Codestring}) => {
Rückkehr (
<SyntaxHighlighter language="Javascript" style={docco}>
 {codeString}
</SyntaxHighlighter>
 );
};

Die SyntaxHighlighter-Komponente akzeptiert die zu verwendende Sprache und den zu verwendenden Stil. Es nimmt auch die Codezeichenfolge als seinen Inhalt.

Sie können die obige Komponente wie folgt rendern:

konst Anwendung = () => {
konst codeString = `
konst Quadrat = (n) => Rückkehr n * n
 `
Rückkehr(
<CodeBlock codestring={codeString}/>
 )
}

Es ist wichtig zu beachten, dass die Verwendung von React-Syntax-Highlighter Ihre Build-Größe erhöhen kann, sodass Sie bei Bedarf den Light-Build importieren können. Der leichte Build hat jedoch keine Standardstile.

Außerdem müssen Sie die gewünschten Sprachen mit importieren und registrieren registrierenSprache aus dem Light-Build exportierte Funktion.

importieren { Licht wie SyntaxHighlighter } aus 'reagieren-syntax-highlighter';
importieren js aus 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
SyntaxHighlighter.registerLanguage('Javascript', js);

Diese Komponente verwendet Highlight.js, um den Code hervorzuheben.

Um stattdessen PrismJS zu verwenden, importieren Sie es wie folgt aus dem Paket „react-syntax-highlighter“:

importieren {Prisma wie SyntaxHighlighter } aus "reagieren-syntax-highlighter";
importieren { vscDarkPlus } aus "react-syntax-highlighter/dist/esm/styles/prism";

Importieren Sie für den Prism Light-Build PrismLight und registrieren Sie die Sprache, die Sie verwenden.

importieren { PrismLight wie SyntaxHighlighter } aus 'reagieren-syntax-highlighter';
importieren jsx aus 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
importieren Prisma aus 'react-syntax-highlighter/dist/esm/styles/prisma/prisma';
SyntaxHighlighter.registerLanguage('jsx', jsx);

Die Verwendung von Prism ist vorteilhaft, insbesondere beim Hervorheben von jsx, da der React-Syntax-Highlighter dies nicht vollständig unterstützt.

Hinzufügen von Zeilennummern zum Codeblock

Nachdem Sie nun wissen, wie Sie einen Codeblock hervorheben, können Sie damit beginnen, zusätzliche Funktionen wie Zeilennummern hinzuzufügen.

Mit React-Syntax-Highlighter müssen Sie nur bestehen Zeilennummern anzeigen an die SyntaxHighlighter-Komponente und setzen Sie sie auf true.

<SyntaxHighlighter language="Javascript" style={docco} showLineNumbers="Stimmt">
 {codeString}
</SyntaxHighlighter>

Die Komponente zeigt nun Zeilennummern neben Ihrem Code an.

Verwenden von benutzerdefinierten Stilen in Ihrer Komponente

Obwohl der React-Syntax-Highlighter Styling bereitstellt, müssen Sie Ihre Codeblöcke möglicherweise manchmal anpassen.

Dazu ermöglicht das Paket die Inline-Übergabe CSS-Stile an die customStyle-Requisite wie unten gezeigt:

<SyntaxHighlighter language="Javascript" style={vscDarkPlus} customStyle={{borderRadius: "5px", Hintergrundfarbe: "#001E3C"}} >
 {codestring}
</SyntaxHighlighter>

Der hervorgehobene Codeblock hat in diesem Beispiel einen benutzerdefinierten Randradius und eine benutzerdefinierte Hintergrundfarbe.

Die Bedeutung der Syntaxhervorhebung

Sie können das Paket „react-syntax-highlighter“ verwenden, um Code in React hervorzuheben. Sie können die Light-Version verwenden, um die Build-Größe zu reduzieren und Codeblöcke mit Ihren eigenen Stilen anzupassen.

Das Hervorheben von Code-Snippets lässt Ihren Code gut aussehen, verbessert seine Lesbarkeit und macht ihn für Leser zugänglicher.