En af nøglefunktionerne i en programmeringsblog er kodeblokke. Du behøver ikke at formatere dem ved hjælp af en syntaks-highlighter, men det får dine blogs til at se meget pænere ud, hvis du gør det. Det kan også forbedre din kodes læsbarhed.

Denne artikel vil vise dig, hvordan du bruger react-syntax-highlighter til at fremhæve kodeblokke i React. Du vil oprette en kodeblokkomponent, der er i stand til at fremhæve kode, der er sendt til den ved hjælp af syntaksen for det angivne sprog.

Syntaksfremhævning Med react-syntax-highlighter

React syntax highlighteren giver dig mulighed for at fremhæve kode ved hjælp af React. I modsætning til andre syntaks highlightere, react-syntax-highlighter er ikke afhængig af ComponentDidUpdate eller ComponentDidMount til at indsætte den fremhævede kode i DOM ved hjælp af dangerouslySetInnerHTML.

Den tilgang er farlig, fordi den udsætter en applikation for cross-site scripting angreb.

I stedet bruger den et syntakstræ til at bygge det virtuelle DOM og opdaterer det kun med ændringer.

instagram viewer

Komponenten bruger PrismJS og Highlight.js i baggrunden. Du kan vælge at bruge enten til at fremhæve din kode. Det er meget nemt at bruge, da det giver out-of-the-box styling.

React-syntax-highlighter-komponenten accepterer koden, sproget og stilen som rekvisitter. Komponenten accepterer også andre tilpasningsmuligheder. Du kan finde dem i React syntaks highlighter dokumentation.

Brug af react-syntax-highlighter-komponenten

For at begynde at bruge react syntax highlighter i React skal du installere den via npm.

npm installere reagere-syntaks-fremhæver --Gemme

Opret en ny komponent kaldet CodeBlock.js i din React-applikation og importer reagere-syntaks-fremhæver:

importere SyntaksHighlighter fra 'react-syntax-highlighter';
importere { docco } fra 'react-syntax-highlighter/dist/esm/styles/hljs';
konst CodeBlock = ({codestring}) => {
Vend tilbage (
<SyntaksHighlighter sprog="javascript" stil={docco}>
 {codeString}
</SyntaxHighlighter>
 );
};

SyntaxHighlighter-komponenten accepterer sproget og den stil, der skal bruges. Det tager også kodestrengen som dens indhold.

Du kan gengive ovenstående komponent som følger:

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

Det er vigtigt at bemærke, at brug af react-syntax-highlighter kan øge din build-størrelse, så hvis du har brug for det, kan du importere den lette build. Den lette opbygning har dog ikke standardstile.

Du skal også importere og registrere de sprog, du vil bruge registersprog funktion eksporteret fra den lette build.

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

Denne komponent bruger Highlight.js til at fremhæve koden.

For at bruge PrismJS i stedet skal du importere det fra react-syntax-highlighter-pakken sådan her:

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

For prisme light build skal du importere PrismLight og registrere det sprog, du bruger.

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

Det er en fordel at bruge prisme, især når man fremhæver jsx, fordi react-syntax-highlighter ikke understøtter det fuldt ud.

Tilføjelse af linjenumre til kodeblokken

Nu hvor du ved, hvordan du fremhæver en kodeblok, kan du begynde at tilføje ekstra funktioner som linjenumre.

Med react-syntax-highlighter skal du kun bestå showLineNumbers til SyntaxHighlighter-komponenten og indstil den til sand.

<SyntaksHighlighter sprog="javascript" style={docco} showLineNumbers="rigtigt">
 {codeString}
</SyntaxHighlighter>

Komponenten vil nu vise linjenumre ved siden af ​​din kode.

Brug af brugerdefinerede stilarter i din komponent

Selvom react-syntax-highlighter giver styling, kan det være nødvendigt at tilpasse dine kodeblokke nogle gange.

Til dette giver pakken dig mulighed for at sende inline CSS stilarter til customStyle prop som vist nedenfor:

<SyntaksHighlighter sprog="javascript" style={vscDarkPlus} customStyle={{borderRadius: "5 px", baggrundsfarve: "#001E3C"}} >
 {kodestreng}
</SyntaxHighlighter>

Den fremhævede kodeblok vil have en tilpasset kantradius og baggrundsfarve i dette eksempel.

Vigtigheden af ​​syntaksfremhævning

Du kan bruge react-syntax-highlighter-pakken til at fremhæve kode i React. Du kan bruge den lette version til at reducere byggestørrelsen og tilpasse kodeblokke ved hjælp af dine egne stile.

Fremhævelse af kodestykker får din kode til at se godt ud, forbedrer dens læsbarhed og gør den mere tilgængelig for læserne.