Una delle caratteristiche chiave di un blog di programmazione sono i blocchi di codice. Non devi formattarli usando un evidenziatore di sintassi, ma se lo fai rende i tuoi blog molto più belli. Può anche migliorare la leggibilità del tuo codice.

Questo articolo ti mostrerà come usare react-syntax-evidenziatore per evidenziare i blocchi di codice in React. Creerai un componente di blocco di codice in grado di evidenziare il codice passato utilizzando la sintassi del linguaggio fornito.

Evidenziazione della sintassi Con react-syntax-evidenziatore

L'evidenziatore della sintassi di reazione consente di evidenziare il codice utilizzando React. A differenza di altri evidenziatori di sintassi, react-syntax-highlighter non si basa su ComponentDidUpdate o ComponentDidMount per inserire il codice evidenziato nel DOM usando pericolosamenteSetInnerHTML.

Questo approccio è pericoloso perché espone un'applicazione a attacchi di scripting tra siti.

Invece, usa un albero della sintassi per costruire il DOM virtuale e lo aggiorna solo con le modifiche.

instagram viewer

Il componente utilizza PrismJS e Highlight.js in background. Puoi scegliere di utilizzare entrambi per evidenziare il tuo codice. È molto facile da usare in quanto fornisce uno stile pronto all'uso.

Il componente react-syntax-highlighter accetta il codice, la lingua e lo stile come prop. Il componente accetta anche altre opzioni di personalizzazione. Li puoi trovare nel documentazione dell'evidenziatore di sintassi reagire.

Utilizzando il componente react-syntax-evidenziatore

Per iniziare a utilizzare l'evidenziatore della sintassi di reazione in React, installalo tramite npm.

npm installare evidenziatore di sintassi di reazione --Salva

Crea un nuovo componente chiamato CodeBlock.js nella tua applicazione React e importa evidenziatore di sintassi di reazione:

importare Evidenziatore di sintassi da 'evidenziatore di sintassi di reazione';
importare {docco} da 'react-syntax-evidenziatore/dist/esm/styles/hljs';
cost CodeBlock = ({codestring}) => {
Restituzione (
<Sintassi Linguaggio evidenziatore="javascript" stile={docco}>
 {stringa di codice}
</SyntaxHighlighter>
 );
};

Il componente SyntaxHighlighter accetta la lingua e lo stile da utilizzare. Prende anche la stringa di codice come contenuto.

È possibile eseguire il rendering del componente sopra come segue:

cost App = () => {
cost codiceStringa = `
cost Quadrato = (n) => Restituzione n * n
 `
Restituzione(
<CodeBlock codestring={codeString}/>
 )
}

È importante notare che l'uso di react-syntax-highlighter può aumentare le dimensioni della build, quindi se necessario, puoi importare la build leggera. La build leggera, tuttavia, non ha stili predefiniti.

Dovrai anche importare e registrare le lingue che desideri utilizzando il file registroLingua funzione esportata dalla build leggera.

importare { Luce come Evidenziatore di sintassi } da 'evidenziatore di sintassi di reazione';
importare js da 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
SyntaxHighlighter.registerLanguage('javascript', js);

Questo componente usa Highlight.js per evidenziare il codice.

Per usare invece PrismJS, importalo dal pacchetto react-syntax-highlighter in questo modo:

importare { Prisma come Evidenziatore di sintassi } da "evidenziatore di sintassi di reazione";
importare { vscDarkPlus } da "react-syntax-evidenziatore/dist/esm/styles/prism";

Per la build della luce prisma, importa PrismLight e registra la lingua che stai utilizzando.

importare {Luce Prisma come Evidenziatore di sintassi } da 'evidenziatore di sintassi di reazione';
importare jsx da 'react-syntax-evidenziatore/dist/esm/languages/prism/jsx';
importare prisma da 'react-syntax-evidenziatore/dist/esm/styles/prism/prism';
SyntaxHighlighter.registerLanguage('jsx', jsx);

L'uso del prisma è vantaggioso, specialmente quando si evidenzia jsx perché react-syntax-highlighter non lo supporta completamente.

Aggiunta di numeri di riga al blocco di codice

Ora che sai come evidenziare un blocco di codice, puoi iniziare ad aggiungere funzionalità extra come i numeri di riga.

Con react-syntax-evidenziatore, devi solo passare showLineNumbers al componente SyntaxHighlighter e impostarlo su true.

<Sintassi Linguaggio evidenziatore="javascript" style={docco} showLineNumbers="VERO">
 {stringa di codice}
</SyntaxHighlighter>

Il componente ora mostrerà i numeri di riga accanto al tuo codice.

Utilizzo di stili personalizzati nel componente

Anche se react-syntax-highlighter fornisce uno stile, a volte potrebbe essere necessario personalizzare i blocchi di codice.

Per questo, il pacchetto ti consente di passare in linea Stili CSS al prop customStyle come mostrato di seguito:

<Sintassi Linguaggio evidenziatore="javascript" style={vscDarkPlus} customStyle={{borderRadius: "5px", colore di sfondo: "#001E3C"}} >
 {stringa di codice}
</SyntaxHighlighter>

Il blocco di codice evidenziato avrà un raggio del bordo e un colore di sfondo personalizzati in questo esempio.

L'importanza dell'evidenziazione della sintassi

Puoi usare il pacchetto react-syntax-highlighter per evidenziare il codice in React. Puoi utilizzare la versione light per ridurre le dimensioni della build e personalizzare i blocchi di codice usando i tuoi stili.

L'evidenziazione dei frammenti di codice rende il tuo codice bello, migliora la sua leggibilità e lo rende più accessibile ai lettori.