Una dintre caracteristicile cheie ale unui blog de programare sunt blocurile de cod. Nu trebuie să le formatați folosind un evidențiator de sintaxă, dar vă face blogurile să arate mult mai frumos dacă o faceți. De asemenea, poate îmbunătăți lizibilitatea codului dvs.

Acest articol vă va arăta cum să utilizați react-syntax-highlighter pentru a evidenția blocurile de cod în React. Veți crea o componentă de bloc de cod capabilă să evidențieze codul transmis utilizând sintaxa limbajului furnizat.

Evidențierea de sintaxă Cu react-syntax-highlighter

Evidențiatorul de sintaxă react vă permite să evidențiați codul folosind React. Spre deosebire de altele evidențiatori de sintaxă, react-syntax-highlighter nu se bazează pe ComponentDidUpdate sau ComponentDidMount pentru a insera codul evidențiat în DOM folosind dangerouslySetInnerHTML.

Această abordare este periculoasă, deoarece expune o aplicație la atacuri cross-site scripting.

În schimb, folosește un arbore de sintaxă pentru a construi DOM-ul virtual și îl actualizează numai cu modificări.

Componenta folosește PrismJS și Highlight.js în fundal. Puteți alege să utilizați oricare pentru a vă evidenția codul. Este foarte ușor de utilizat, deoarece oferă un stil ieșit din cutie.

Componenta react-sintaxă-highlighter acceptă codul, limbajul și stilul ca elemente de recuzită. Componenta acceptă și alte opțiuni de personalizare. Le puteți găsi în documentația de evidențiere a sintaxei reacției.

Folosind Componenta react-sintaxă-highlighter

Pentru a începe să utilizați indicatorul de sintaxă react în React, instalați-l prin npm.

npm instalare reacţionează-sintaxă-evidenţiator --Salvați

Creați o nouă componentă numită CodeBlock.js în aplicația dvs. React și importați reacţionează-sintaxă-evidenţiator:

import SyntaxHighlighter din „react-sintax-hilighter”;
import { docco } din 'react-syntax-highlighter/dist/esm/styles/hljs';
const CodeBlock = ({codestring}) => {
întoarcere (
<SyntaxHighlighter language="javascript" stil={docco}>
 {codeString}
</SyntaxHighlighter>
 );
};

Componenta SyntaxHighlighter acceptă limbajul și stilul de utilizat. De asemenea, ia și șirul de cod ca conținut.

Puteți reda componenta de mai sus după cum urmează:

const Aplicație = () => {
const codeString = `
const Pătrat = (n) => întoarcere n * n
 `
întoarcere(
<CodeBlock codestring={codeString}/>
 )
}

Este important să rețineți că utilizarea react-syntax-highlighter vă poate crește dimensiunea construcției, așa că, dacă aveți nevoie, puteți importa versiunea ușoară. Cu toate acestea, construcția ușoară nu are stiluri implicite.

De asemenea, va trebui să importați și să înregistrați limbile pe care doriți să le utilizați registerLanguage funcția exportată din versiunea ușoară.

import { Ușoară la fel de SyntaxHighlighter } din „react-sintax-hilighter”;
import js din „react-syntax-highlighter/dist/esm/languages/hljs/javascript”;
SintaxăHighlighter.registerLanguage('javascript', js);

Această componentă folosește Highlight.js pentru a evidenția codul.

Pentru a utiliza PrismJS, importați-l din pachetul react-syntax-highlighter astfel:

import { Prismă la fel de SyntaxHighlighter } din „react-sintax-hilighter”;
import { vscDarkPlus } din „react-syntax-highlighter/dist/esm/styles/prism”;

Pentru construcția de lumină prismă, importați PrismLight și înregistrați limba pe care o utilizați.

import { PrismLight la fel de SyntaxHighlighter } din „react-sintax-hilighter”;
import jsx din „react-syntax-highlighter/dist/esm/languages/prism/jsx”;
import prismă din 'react-syntax-highlighter/dist/esm/styles/prism/prism';
SintaxăHighlighter.registerLanguage('jsx', jsx);

Utilizarea prismei este benefică, mai ales atunci când evidențiați jsx, deoarece react-syntax-highlighter nu îl acceptă pe deplin.

Adăugarea numerelor de linie la blocul de cod

Acum că știți cum să evidențiați un bloc de cod, puteți începe să adăugați funcții suplimentare, cum ar fi numerele de linie.

Cu react-syntax-highlighter, trebuie doar să treci showLineNumbers la componenta SyntaxHighlighter și setați-o la true.

<SyntaxHighlighter language="javascript" stil={docco} showLineNumbers="Adevărat">
 {codeString}
</SyntaxHighlighter>

Componenta va afișa acum numerele de rând lângă codul dvs.

Utilizarea stilurilor personalizate în componenta dvs

Chiar dacă react-syntax-highlighter oferă stil, poate fi necesar să personalizați blocurile de cod uneori.

Pentru aceasta, pachetul vă permite să treceți în linie Stiluri CSS la propStyle personalizat, după cum se arată mai jos:

<SyntaxHighlighter language="javascript" style={vscDarkPlus} customStyle={{borderRadius: "5px", culoare de fundal: "#001E3C"}} >
 {codestring}
</SyntaxHighlighter>

Blocul de cod evidențiat va avea o rază personalizată a marginii și o culoare de fundal în acest exemplu.

Importanța evidențierii sintaxei

Puteți folosi pachetul react-syntax-highlighter pentru a evidenția codul în React. Puteți folosi versiunea ușoară pentru a reduce dimensiunea construcției și a personaliza blocurile de cod folosind propriile stiluri.

Evidențierea fragmentelor de cod face ca codul să arate bine, îi îmbunătățește lizibilitatea și îl face mai accesibil pentru cititori.