En av nøkkelfunksjonene til en programmeringsblogg er kodeblokker. Du trenger ikke å formatere dem med en syntaksuthever, men det får bloggene dine til å se mye finere ut hvis du gjør det. Det kan også forbedre kodens lesbarhet.

Denne artikkelen vil vise deg hvordan du bruker react-syntax-highlighter for å markere kodeblokker i React. Du vil lage en kodeblokkkomponent som er i stand til å fremheve kode som sendes til den ved å bruke syntaksen til det angitte språket.

Syntaksutheving Med react-syntax-highlighter

React-syntaksutheveren lar deg markere kode ved hjelp av React. I motsetning til andre syntaks highlightere, react-syntax-highlighter er ikke avhengig av ComponentDidUpdate eller ComponentDidMount for å sette inn den uthevede koden i DOM ved hjelp av dangerouslySetInnerHTML.

Den tilnærmingen er farlig fordi den utsetter en applikasjon for skriptangrep på tvers av nettsteder.

I stedet bruker den et syntakstre for å bygge den virtuelle DOM og oppdaterer den bare med endringer.

Komponenten bruker PrismJS og Highlight.js i bakgrunnen. Du kan velge å bruke begge for å markere koden din. Den er veldig enkel å bruke, da den gir ut-av-boksen styling.

instagram viewer

React-syntax-highlighter-komponenten godtar koden, språket og stilen som rekvisitter. Komponenten godtar også andre tilpasningsalternativer. Du finner dem i dokumentasjon for react syntaks highlighter.

Bruke react-syntax-highlighter-komponenten

For å begynne å bruke react syntax highlighter i React, installer den via npm.

npm installere reager-syntaks-highlighter --lagre

Opprett en ny komponent kalt CodeBlock.js i din React-applikasjon og importer reager-syntaks-highlighter:

import SyntaksHighlighter fra 'reager-syntaks-highlighter';
import { docco } fra 'react-syntax-highlighter/dist/esm/styles/hljs';
konst CodeBlock = ({codestring}) => {
komme tilbake (
<SyntaxHighlighter-språk="javascript" stil={docco}>
 {codeString}
</SyntaxHighlighter>
 );
};

SyntaxHighlighter-komponenten godtar språket og stilen som skal brukes. Den tar også kodestrengen som innhold.

Du kan gjengi komponenten ovenfor som følger:

konst App = () => {
konst kodestreng = `
konst Kvadrat = (n) => komme tilbake n * n
 `
komme tilbake(
<CodeBlock codestring={codeString}/>
 )
}

Det er viktig å merke seg at bruk av react-syntax-highlighter kan øke byggestørrelsen din, så hvis du trenger det, kan du importere den lette builden. Den lette konstruksjonen har imidlertid ikke standardstiler.

Du må også importere og registrere språkene du vil bruke registerspråk funksjon eksportert fra light build.

import { Lys som SyntaxHighlighter } fra 'reager-syntaks-highlighter';
import js fra 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
SyntaxHighlighter.registerLanguage('javascript', js);

Denne komponenten bruker Highlight.js for å markere koden.

For å bruke PrismJS i stedet, importer den fra react-syntax-highlighter-pakken slik:

import { Prisme som SyntaxHighlighter } fra "reager-syntaks-highlighter";
import { vscDarkPlus } fra "react-syntax-highlighter/dist/esm/styles/prism";

For prisme light build, importer PrismLight og registrer språket du bruker.

import { PrismLight som SyntaxHighlighter } fra 'reager-syntaks-highlighter';
import jsx fra 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
import prisme fra 'react-syntax-highlighter/dist/esm/styles/prism/prism';
SyntaxHighlighter.registerLanguage('jsx', jsx);

Å bruke prisme er fordelaktig, spesielt når du markerer jsx fordi react-syntax-highlighter ikke støtter det fullt ut.

Legge til linjenumre i kodeblokken

Nå som du vet hvordan du markerer en kodeblokk, kan du begynne å legge til ekstra funksjoner som linjenumre.

Med react-syntax-highlighter trenger du bare å bestå showLineNumbers til SyntaxHighlighter-komponenten og sett den til sann.

<SyntaxHighlighter-språk="javascript" style={docco} showLineNumbers="ekte">
 {codeString}
</SyntaxHighlighter>

Komponenten vil nå vise linjenumre ved siden av koden din.

Bruk av egendefinerte stiler i komponenten din

Selv om react-syntax-highlighter gir styling, kan det hende du må tilpasse kodeblokkene dine noen ganger.

For dette lar pakken deg sende inline CSS-stiler til customStyle-rekvisitten som vist nedenfor:

<SyntaxHighlighter-språk="javascript" style={vscDarkPlus} customStyle={{borderRadius: "5 px", bakgrunnsfarge: "#001E3C"}} >
 {kodestreng}
</SyntaxHighlighter>

Den uthevede kodeblokken vil ha en egendefinert kantradius og bakgrunnsfarge i dette eksemplet.

Viktigheten av syntaksutheving

Du kan bruke react-syntax-highlighter-pakken for å markere kode i React. Du kan bruke den lette versjonen til å redusere byggestørrelsen og tilpasse kodeblokker ved å bruke dine egne stiler.

Å fremheve kodebiter gjør at koden ser bra ut, forbedrer lesbarheten og gjør den mer tilgjengelig for leserne.