Comment ajouter la coloration syntaxique à un bloc de code dans React

L'une des principales caractéristiques d'un blog de programmation est les blocs de code. Vous n'avez pas besoin de les formater à l'aide d'un surligneur de syntaxe, mais cela rend vos blogs beaucoup plus agréables si vous le faites. Cela peut également améliorer la lisibilité de votre code.

Cet article vous montrera comment utiliser react-syntax-highlighter pour mettre en évidence les blocs de code dans React. Vous allez créer un composant de bloc de code capable de mettre en surbrillance le code qui lui est transmis à l'aide de la syntaxe du langage fourni.

Mise en évidence de la syntaxe avec react-syntax-highlighter

Le surligneur de syntaxe de réaction vous permet de mettre en surbrillance le code à l'aide de React. contrairement à d'autres surligneurs de syntaxe, react-syntax-highlighter ne s'appuie pas sur ComponentDidUpdate ou ComponentDidMount pour insérer le code en surbrillance dans le DOM en utilisant dangereusementSetInnerHTML.

Cette approche est dangereuse car elle expose une application à attaques de script intersite.

Au lieu de cela, il utilise un arbre de syntaxe pour construire le DOM virtuel et le met à jour uniquement avec les modifications.

Le composant utilise PrismJS et Highlight.js en arrière-plan. Vous pouvez choisir d'utiliser l'un ou l'autre pour mettre en évidence votre code. Il est très facile à utiliser car il offre un style prêt à l'emploi.

Le composant react-syntax-highlighter accepte le code, le langage et le style comme accessoires. Le composant accepte également d'autres options de personnalisation. Vous pouvez les trouver dans le réagir à la documentation sur le surligneur de syntaxe.

Utilisation du composant react-syntax-highlighter

Pour commencer à utiliser le surligneur de syntaxe de réaction dans React, installez-le via npm.

npm installer surligneur de syntaxe réactive --enregistrer

Créez un nouveau composant appelé CodeBlock.js dans votre application React et importez surligneur de syntaxe réactive:

importer SyntaxeHighlighter de 'react-syntax-highlighter' ;
importer { docco } de 'react-syntax-highlighter/dist/esm/styles/hljs' ;
constante CodeBlock = ({codestring}) => {
revenir (
<SyntaxeLangue du surligneur="javascript" style={docco}>
 {codeString}
</SyntaxHighlighter>
 );
};

Le composant SyntaxHighlighter accepte la langue et le style à utiliser. Il prend également la chaîne de code comme contenu.

Vous pouvez rendre le composant ci-dessus comme suit :

constante Application = () => {
constante codeString = `
constante Carré = (n) => revenir n * n
 `
revenir(
<CodeBlock chaîne de code={codeString}/>
 )
}

Il est important de noter que l'utilisation de react-syntax-highlighter peut augmenter la taille de votre construction, donc si vous en avez besoin, vous pouvez importer la construction légère. La version légère, cependant, n'a pas de styles par défaut.

Vous devrez également importer et enregistrer les langues souhaitées à l'aide du enregistrerLangue fonction exportée de la construction légère.

importer { Lumière comme Surligneur de syntaxe } de 'react-syntax-highlighter' ;
importer js de 'react-syntax-highlighter/dist/esm/languages/hljs/javascript' ;
SyntaxeHighlighter.registerLanguage('javascript', js);

Ce composant utilise Highlight.js pour mettre en évidence le code.

Pour utiliser PrismJS à la place, importez-le depuis le package react-syntax-highlighter comme ceci :

importer { Prisme comme Surligneur de syntaxe } de "react-syntax-highlighter" ;
importer { vscDarkPlus } de "react-syntax-highlighter/dist/esm/styles/prism" ;

Pour la version Prism Light, importez PrismLight et enregistrez la langue que vous utilisez.

importer { PrismLight comme Surligneur de syntaxe } de 'react-syntax-highlighter' ;
importer jsx de 'react-syntax-highlighter/dist/esm/languages/prism/jsx' ;
importer prisme de 'react-syntax-highlighter/dist/esm/styles/prism/prism' ;
SyntaxeHighlighter.registerLanguage('jsx', jsx);

L'utilisation de prism est bénéfique, en particulier lors de la mise en évidence de jsx, car react-syntax-highlighter ne le prend pas entièrement en charge.

Ajout de numéros de ligne au bloc de code

Maintenant que vous savez comment mettre en surbrillance un bloc de code, vous pouvez commencer à ajouter des fonctionnalités supplémentaires telles que les numéros de ligne.

Avec react-syntax-highlighter, il vous suffit de passer afficherNumérosLigne au composant SyntaxHighlighter et définissez-le sur true.

<SyntaxeLangue du surligneur="javascript" style={docco} showLineNumbers="vrai">
 {codeString}
</SyntaxHighlighter>

Le composant affichera maintenant les numéros de ligne à côté de votre code.

Utilisation de styles personnalisés dans votre composant

Même si react-syntax-highlighter fournit un style, vous devrez peut-être parfois personnaliser vos blocs de code.

Pour cela, le package vous permet de passer en ligne Styles CSS à la prop customStyle comme indiqué ci-dessous :

<SyntaxeLangue du surligneur="javascript" style={vscDarkPlus} customStyle={{borderRadius: "5px", Couleur de l'arrière plan: "#001E3C"}} >
 {chaîne de code}
</SyntaxHighlighter>

Le bloc de code en surbrillance aura un rayon de bordure et une couleur d'arrière-plan personnalisés dans cet exemple.

L'importance de la coloration syntaxique

Vous pouvez utiliser le package react-syntax-highlighter pour mettre en surbrillance le code dans React. Vous pouvez utiliser la version allégée pour réduire la taille de la construction et personnaliser les blocs de code en utilisant vos propres styles.

La mise en surbrillance des extraits de code donne à votre code une belle apparence, améliore sa lisibilité et le rend plus accessible aux lecteurs.