Jednou z kľúčových funkcií programovacieho blogu sú bloky kódu. Nemusíte ich formátovať pomocou zvýrazňovača syntaxe, no vďaka tomu budú vaše blogy vyzerať oveľa krajšie. Môže tiež zlepšiť čitateľnosť kódu.

Tento článok vám ukáže, ako použiť zvýrazňovač syntaxe reakcie na zvýraznenie blokov kódu v React. Vytvoríte komponent bloku kódu schopný zvýrazniť kód, ktorý mu bol odovzdaný pomocou syntaxe poskytnutého jazyka.

Zvýraznenie syntaxe So zvýrazňovačom syntaxe

Zvýrazňovač syntaxe reakcie vám umožňuje zvýrazniť kód pomocou funkcie React. Na rozdiel od iných zvýrazňovače syntaxe, respond-syntax-highlighter sa nespolieha na ComponentDidUpdate alebo ComponentDidMount na vloženie zvýrazneného kódu do DOM pomocou nebezpečneSetInnerHTML.

Tento prístup je nebezpečný, pretože vystavuje aplikáciu cross-site skriptovacie útoky.

Namiesto toho používa strom syntaxe na vytvorenie virtuálneho DOM a aktualizuje ho iba zmenami.

Komponent používa na pozadí PrismJS a Highlight.js. Na zvýraznenie kódu môžete použiť ktorýkoľvek z nich. Jeho použitie je veľmi jednoduché, pretože poskytuje štýlový vzhľad.

instagram viewer

Komponent Reagovať-Zvýrazňovač syntaxe akceptuje kód, jazyk a štýl ako rekvizity. Komponent akceptuje aj ďalšie možnosti prispôsobenia. Nájdete ich v reagovať na dokumentáciu zvýrazňovača syntaxe.

Použitie komponentu zvýrazňovača syntaxe

Ak chcete začať používať zvýrazňovač syntaxe reakcie v React, nainštalujte ho cez npm.

npm Inštalácia reagovať-zvýrazňovač syntaxe --uložiť

Vytvorte nový komponent s názvom CodeBlock.js vo vašej aplikácii React a importujte reagovať-zvýrazňovač syntaxe:

importovať Zvýrazňovač syntaxe od 'react-syntax-highlighter';
importovať { docco } od 'react-syntax-highlighter/dist/esm/styles/hljs';
konšt CodeBlock = ({codestring}) => {
vrátiť (
<Jazyk zvýrazňovača syntaxe="javascript" style={docco}>
 {codeString}
</SyntaxHighlighter>
 );
};

Komponent SyntaxHighlighter akceptuje jazyk a štýl, ktorý sa má použiť. Za obsah berie aj reťazec kódu.

Vyššie uvedený komponent môžete vykresliť takto:

konšt Aplikácia = () => {
konšt codeString = `
konšt Štvorec = (n) => vrátiť n * n
 `
vrátiť(
<CodeBlock codestring={codeString}/>
 )
}

Je dôležité poznamenať, že použitie zvýrazňovača syntaxe reagovať môže zväčšiť veľkosť zostavy, takže ak potrebujete, môžete importovať ľahkú zostavu. Svetlá zostava však nemá predvolené štýly.

Budete tiež musieť importovať a zaregistrovať jazyky, ktoré chcete pomocou registerLanguage funkcia exportovaná zo zostavy svetla.

importovať { Svetlo ako Zvýrazňovač syntaxe } od 'react-syntax-highlighter';
importovať js od 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
SyntaxHighlighter.registerLanguage('javascript', js);

Tento komponent používa na zvýraznenie kódu Highlight.js.

Ak chcete namiesto toho použiť PrismJS, importujte ho z balíka Reag-syntax-highlighter takto:

importovať { Hranol ako Zvýrazňovač syntaxe } od "reagovať-zvýrazňovač syntaxe";
importovať { vscDarkPlus } od "zvýrazňovač-zvýrazňovača-syntaxe/dist/esm/styles/prism";

Pre vytvorenie hranolového svetla importujte PrismLight a zaregistrujte jazyk, ktorý používate.

importovať { PrismLight ako Zvýrazňovač syntaxe } od 'react-syntax-highlighter';
importovať jsx od 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
importovať hranol od 'react-syntax-highlighter/dist/esm/styles/prism/prism';
SyntaxHighlighter.registerLanguage('jsx', jsx);

Použitie hranola je výhodné, najmä pri zvýrazňovaní jsx, pretože zvýrazňovač syntaxe ho plne nepodporuje.

Pridanie čísel riadkov do bloku kódu

Teraz, keď viete, ako zvýrazniť blok kódu, môžete začať pridávať ďalšie funkcie, ako sú čísla riadkov.

So zvýrazňovačom reagovať-syntaxe stačí prejsť showLineNumbers na komponent SyntaxHighlighter a nastavte ho na hodnotu true.

<Jazyk zvýrazňovača syntaxe="javascript" style={docco} showLineNumbers="pravda">
 {codeString}
</SyntaxHighlighter>

Komponent teraz zobrazí čísla riadkov vedľa vášho kódu.

Používanie vlastných štýlov vo vašom komponente

Aj keď zvýrazňovač syntaxe reaguje, niekedy budete musieť prispôsobiť bloky kódu.

Na tento účel vám balík umožňuje prejsť inline CSS štýly na prop customStyle, ako je uvedené nižšie:

<Jazyk zvýrazňovača syntaxe="javascript" style={vscDarkPlus} customStyle={{borderRadius: "5 pixelov", farba pozadia: "#001E3C"}} >
 {codestring}
</SyntaxHighlighter>

Zvýraznený blok kódu bude mať v tomto príklade vlastný polomer okraja a farbu pozadia.

Význam zvýraznenia syntaxe

Na zvýraznenie kódu v Reacte môžete použiť balík reag-syntax-highlighter. Odľahčenú verziu môžete použiť na zmenšenie veľkosti zostavy a prispôsobenie blokov kódu pomocou vlastných štýlov.

Zvýraznením útržkov kódu bude váš kód vyzerať dobre, zlepší sa jeho čitateľnosť a bude prístupnejší pre čitateľov.