Jednou z klíčových funkcí blogování o programování jsou bloky kódu. Nemusíte je formátovat pomocí zvýrazňovače syntaxe, ale vaše blogy díky tomu budou vypadat mnohem lépe. Může také zlepšit čitelnost vašeho kódu.

Tento článek vám ukáže, jak použít reagovat-zvýrazňovač syntaxe ke zvýraznění bloků kódu v Reactu. Vytvoříte komponentu bloku kódu schopnou zvýraznit kód, který jí byl předán pomocí syntaxe poskytnutého jazyka.

Zvýraznění syntaxe Se zvýrazňovačem syntaxe reakce

Zvýrazňovač syntaxe reakce vám umožňuje zvýraznit kód pomocí funkce React. Na rozdíl od jiných zvýrazňovače syntaxe, response-syntax-highlighter nespoléhá na ComponentDidUpdate nebo ComponentDidMount při vkládání zvýrazněného kódu do DOM pomocí nebezpečněSetInnerHTML.

Tento přístup je nebezpečný, protože vystavuje aplikaci cross-site skriptovací útoky.

Místo toho používá k vytvoření virtuálního DOM strom syntaxe a aktualizuje jej pouze se změnami.

Komponenta používá PrismJS a Highlight.js na pozadí. Ke zvýraznění kódu můžete použít kterýkoli z nich. Jeho použití je velmi snadné, protože poskytuje styling out-of-the-box.

instagram viewer

Komponenta reagovat-zvýrazňovač syntaxe přijímá kód, jazyk a styl jako rekvizity. Komponenta přijímá i další možnosti přizpůsobení. Najdete je v reagovat na dokumentaci zvýrazňovače syntaxe.

Pomocí komponenty Reagovat-Zvýrazňovač syntaxe

Chcete-li začít používat zvýrazňovač syntaxe reakce v React, nainstalujte jej přes npm.

npm Nainstalujte reagovat-zvýrazňovač syntaxe --Uložit

Vytvořte novou komponentu s názvem CodeBlock.js ve vaší aplikaci React a importujte reagovat-zvýrazňovač syntaxe:

import Zvýrazňovač syntaxe z 'react-syntax-highlighter';
import { docco } z 'react-syntax-highlighter/dist/esm/styles/hljs';
konst CodeBlock = ({codestring}) => {
vrátit se (
<SyntaxHighlighter language="javascript" style={docco}>
 {codeString}
</SyntaxHighlighter>
 );
};

Komponenta SyntaxHighlighter přijímá jazyk a styl, který se má použít. Za obsah bere také řetězec kódu.

Výše uvedenou komponentu můžete vykreslit následovně:

konst Aplikace = () => {
konst codeString = `
konst Čtverec = (n) => vrátit se n * n
 `
vrátit se(
<CodeBlock codestring={codeString}/>
 )
}

Je důležité poznamenat, že použití funkce reagovat-zvýrazňovač syntaxe může zvětšit velikost vaší sestavy, takže pokud potřebujete, můžete importovat lehké sestavení. Světlé sestavení však nemá výchozí styly.

Budete také muset importovat a zaregistrovat jazyky, které chcete pomocí registerLanguage funkce exportovaná ze sestavení světla.

import { Světlo tak jako Zvýrazňovač syntaxe } z 'react-syntax-highlighter';
import js z 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
SyntaxHighlighter.registerLanguage('javascript', js);

Tato komponenta používá ke zvýraznění kódu Highlight.js.

Chcete-li místo toho použít PrismJS, importujte jej z balíčku respond-syntax-highlighter takto:

import { Hranol tak jako Zvýrazňovač syntaxe } z "reagovat-zvýrazňovač syntaxe";
import { vscDarkPlus } z "zvýrazňovač-reagovat-syntaxe/dist/esm/styles/prism";

Pro vytvoření hranolového světla importujte PrismLight a zaregistrujte jazyk, který používáte.

import { PrismLight tak jako Zvýrazňovač syntaxe } z 'react-syntax-highlighter';
import jsx z 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
import hranol z 'react-syntax-highlighter/dist/esm/styles/prism/prism';
SyntaxHighlighter.registerLanguage('jsx', jsx);

Použití hranolu je výhodné, zejména při zvýrazňování jsx, protože zvýraznění syntaxe reakce to plně nepodporuje.

Přidání čísel řádků do bloku kódu

Nyní, když víte, jak zvýraznit blok kódu, můžete začít přidávat další funkce, jako jsou čísla řádků.

Se zvýrazňovačem reagovat-syntaxe stačí projít showLineNumbers na komponentu SyntaxHighlighter a nastavte ji na hodnotu true.

<SyntaxHighlighter language="javascript" style={docco} showLineNumbers="skutečný">
 {codeString}
</SyntaxHighlighter>

Komponenta nyní zobrazí čísla řádků vedle vašeho kódu.

Použití vlastních stylů ve vaší komponentě

Přestože Reag-Syntax-Highlighter poskytuje styl, možná budete muset někdy upravit bloky kódu.

Za tímto účelem vám balíček umožňuje projít inline CSS styly na prop customStyle, jak je uvedeno níže:

<SyntaxHighlighter language="javascript" style={vscDarkPlus} customStyle={{borderRadius: "5px", barva pozadí: "#001E3C"}} >
 {codestring}
</SyntaxHighlighter>

Zvýrazněný blok kódu bude mít v tomto příkladu vlastní poloměr ohraničení a barvu pozadí.

Význam zvýraznění syntaxe

Ke zvýraznění kódu v Reactu můžete použít balíček response-syntax-highlighter. Odlehčenou verzi můžete použít ke zmenšení velikosti sestavení a přizpůsobení bloků kódu pomocí vlastních stylů.

Zvýrazněním úryvků kódu bude váš kód vypadat dobře, zlepší se jeho čitelnost a bude přístupnější pro čtenáře.