Comment ajouter des blocs de code dans votre application React

Dans le développement Web, l'affichage des blocs de code avec un formatage et une mise en évidence appropriés est une exigence courante. Les blocs de code sont un outil polyvalent qui peut être utilisé à diverses fins, notamment l'affichage de code et l'amélioration de l'engagement des utilisateurs.

Installation de la bibliothèque

D'abord, créer une application React et installez le blocs de code de réaction bibliothèque. Cette bibliothèque est utilisée pour afficher des blocs de code dans votre application. Vous pouvez installer cette bibliothèque à l'aide de npm, le gestionnaire de packages pour Node.js. Ouvrez votre terminal et accédez au répertoire de votre projet. Exécutez ensuite la commande suivante :

npm installer des blocs de code de réaction

Cela installera la bibliothèque react-code-blocks dans votre projet.

Ajout du bloc de code à votre projet

Une fois que vous avez installé la bibliothèque react-code-blocks, vous êtes prêt à commencer. Tout d'abord, importez le Bloc de code composant de la bibliothèque react-code-blocks de votre application. Vous pouvez le faire en ajoutant le code suivant à votre fichier :

importer { CodeBlock } depuis"réagir-code-blocs";

Ensuite, utilisez le composant CodeBlock dans votre application en ajoutant le code suivant :

 texte='console.log("Bonjour, tout le monde!");'
 langue='javascript'
 showLineNumbers={vrai}
 theme={votreThème}
/>

Dans le code ci-dessus, vous transmettez plusieurs accessoires au composant CodeBlock. Voici une liste de tous les accessoires disponibles :

• texte (obligatoire): Le code à afficher dans le bloc de code.
• langue (obligatoire): Le langage de programmation du code. Ceci est utilisé pour coloration syntaxique du bloc de code.
• afficherNumérosLigne: Une valeur booléenne indiquant s'il faut afficher ou non les numéros de ligne dans le bloc de code. Il est faux par défaut.
• thème:Le thème à utiliser pour le bloc de code. Il peut s'agir d'un thème intégré ou d'un objet de thème personnalisé. Il s'agit par défaut de GitHub.
• NuméroLigneDébut: Le numéro de ligne à partir duquel commencer à compter. Il est par défaut à 1.
• codeBloc: Un objet contenant des options pour le bloc de code. Cela peut inclure numéros de ligne (un booléen indiquant s'il faut afficher ou non les numéros de ligne) et wrapLines (un booléen indiquant s'il faut envelopper les lignes ou non).
• sur clic: Une fonction à appeler lorsque le bloc de code est cliqué.

Voici un exemple d'utilisation de tous ces accessoires :

importer { CodeBlock } depuis"réagir-code-blocs";
fonctionMonComposant() {
constante poignéeClic = () => {
console.enregistrer("Bloc de code cliqué");
 };
retour (
 texte='const salutation = "Bonjour, monde!"; console.log (salutation);'
 langue='javascript'
 showLineNumbers={vrai}
 thème='atome-un-noir'
 nombreLigneDépart={10}
 codeBloc={{ numéros de ligne: FAUX, wrapLines: vrai }}
 onClick={handleClick}
 />
 );
}

Dans le code ci-dessus, vous utilisez atome-un-noir thème, en commençant les numéros de ligne à 10, en désactivant les numéros de ligne, en activant le retour à la ligne et en attachant un gestionnaire de clic.

En utilisant ces accessoires, vous pouvez personnaliser l'apparence et le comportement de vos blocs de code en fonction de vos besoins.

Ajout de thèmes dans vos blocs de code

La bibliothèque react-code-blocks fournit une variété de thèmes intégrés qui peuvent être utilisés pour personnaliser l'apparence de vos blocs de code. Pour utiliser un thème intégré, il vous suffit de spécifier le nom du thème dans le thème soutenir. Par exemple, pour utiliser le atome-un-noir thème, vous utiliseriez le code suivant :

 texte='console.log("Bonjour, tout le monde!");'
 langue='javascript'
 showLineNumbers={vrai}
 thème='atome-un-noir'
/>

En plus des thèmes intégrés, vous pouvez également créer des thèmes personnalisés en définissant un objet JavaScript qui spécifie les couleurs à utiliser pour différentes parties du bloc de code. Voici un exemple de ce à quoi un objet de thème personnalisé pourrait ressembler :

constante monThèmePersonnalisé = {
 CouleurNuméroLigne: "#ccc",
 lineNumberBgColor: "#222",
 Couleur de l'arrière plan: "#222",
 textColor: "#ccc",
 substringColor: "#00ff00",
 mot-cléCouleur: "#0077ff",
 Couleurattribut: "#ffaa00",
 selectorTagColor: "#0077ff",
 docTagColor: "#aa00ff",
 nomCouleur: "#f8f8f8",
 BuiltInColor: "#0077ff",
 couleur littérale: "#ffaa00",
 bulletCouleur: "#ffaa00",
 codeCouleur: "#ccc",
 additionColor: "#00ff00",
 regexpColor: "#f8f8f8",
 symboleCouleur: "#ffaa00",
 variableCouleur: "#ffaa00",
 templateVariableColor: "#ffaa00",
 couleur du lien: "#aa00ff",
 selectorAttributeColor: "#ffaa00",
 selectorPseudoColor: "#aa00ff",
 typeCouleur: "#0077ff",
 stringColor: "#00ff00",
 selectorIdColor: "#ffaa00",
 quoteColor: "#f8f8f8",
 templateTagColor: "#ccc",
 suppressionCouleur: "#ff0000",
 titleColor: "#0077ff",
 sectionCouleur: "#0077ff",
 commentColor: "#777",
 metaKeywordColor: "#f8f8f8",
 metaColor: "#aa00ff",
 fonctionCouleur: "#0077ff",
 nombreCouleur: "#ffaa00",
};

Pour utiliser un thème personnalisé, vous devez passer l'objet theme comme accessoire de thème du composant CodeBlock :

 texte='console.log("Bonjour, tout le monde!");'
 langue='javascript'
 showLineNumbers={vrai}
 theme={monThèmePersonnalisé}
/>

Ci-dessous la sortie :

En utilisant des thèmes intégrés et personnalisés, vous pouvez personnaliser l'apparence de vos blocs de code en fonction de vos besoins et de la conception globale de votre application.

Ajouter CopyBlock à votre projet

Si vous souhaitez ajouter la fonctionnalité de copie à vos blocs de code, vous pouvez utiliser le CopierBloquer composant fourni par la bibliothèque react-code-blocks. Pour utiliser ce composant, vous devez installer le réagir-copier-dans-le presse-papiers bibliothèque aussi. Voici comment ajouter le composant CopyBlock à votre projet :

Installez le réagir-copier-dans-le presse-papiers bibliothèque:

npm installer réagir-copier-dans-le presse-papiers

Importez les composants et bibliothèques nécessaires :

importer { CopierBloc } depuis'réagir-code-blocs';
importer { FaCopie } depuis'réagir-icônes/fa';
importer copie depuis'copier dans le presse-papier';

Utilisez le composant CopyBlock dans votre code :

constante codes = 'console.log("Bonjour, tout le monde!");';
constante langue = 'javascript';
 texte={code}
 langue={langue}
 showLineNumbers={vrai}
 wrapLines={vrai}
 thème='dracula'
 codeBloc
 icône={}
 onCopy={() => copier (code)}
/>

Ci-dessous la sortie :

En ajoutant le composant CopyBlock à votre projet, vous pouvez facilement permettre aux utilisateurs de copier le code de vos blocs de code dans leur presse-papiers.

Méthodes alternatives pour ajouter des blocs de code

Bien que l'utilisation de la bibliothèque react-code-blocks soit le moyen le plus simple d'ajouter des blocs de code à votre application React, il existe également quelques méthodes alternatives que vous pouvez utiliser :

1. Ajout manuel de la coloration syntaxique: Si vous ne souhaitez pas utiliser de bibliothèque, vous pouvez ajouter manuellement la coloration syntaxique à votre code en utilisant Tailwind CSS ou CSS normal. Cela implique d'ajouter des classes CSS à vos éléments de code pour appliquer les styles appropriés. Bien que cette méthode vous donne plus de contrôle sur les styles, sa configuration et sa maintenance peuvent prendre du temps.
2. Utilisation d'autres bibliothèques: Il existe plusieurs autres bibliothèques disponibles qui fournissent la coloration syntaxique pour le code, telles que surligneur de syntaxe réactive, prisme-réagir-rendu, et point culminant.js. Ces bibliothèques ont des fonctionnalités et des styles différents, vous pouvez donc en choisir une qui correspond à vos besoins.

Bien que la bibliothèque react-code-blocks soit un excellent choix pour la plupart des applications, ces méthodes alternatives peuvent être utiles dans certaines situations. En fin de compte, la méthode que vous choisirez dépendra de vos besoins et préférences spécifiques.

Améliorez l'engagement des utilisateurs avec les blocs de code

En utilisant des blocs de code pour expliquer le code, fournir des exemples de codage interactifs et créer visuellement conceptions attrayantes, vous pouvez améliorer l'expérience de vos utilisateurs et les garder engagés avec votre site Web ou application. De plus, en utilisant des fonctionnalités telles que CopyBlock et des thèmes personnalisés, vous pouvez rendre votre application React encore plus fonctionnelle et attrayante.