Dans le développement web, l’affichage de blocs de code avec un formatage et une mise en évidence appropriés est une exigence commune. Les blocs de code sont un outil polyvalent qui peut être utilisé à diverses fins, notamment pour afficher du code et améliorer l’engagement des utilisateurs.
Installation de la bibliothèque
Tout d’abord, créez une application React et installez la bibliothèque react-code-blocks bibliothèque. Cette bibliothèque est utilisée pour afficher les blocs de code dans votre application. Vous pouvez installer cette bibliothèque en utilisant npm, le gestionnaire de paquets pour Node.js. Ouvrez votre terminal et naviguez jusqu’au répertoire de votre projet. Exécutez ensuite la commande suivante :
npm install react-code-blocks
Cela installera la bibliothèque react-code-blocks dans votre projet.
Ajouter le 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 CodeBlock de la bibliothèque react-code-blocks dans votre application. Vous pouvez le faire en ajoutant le code suivant à votre fichier :
import { CodeBlock } from "react-code-blocks";
Ensuite, utilisez le composant CodeBlock dans votre application en ajoutant le code suivant :
<CodeBlock
text='console.log("Hello, world!");'
language='javascript'
showLineNumbers={true}
theme={yourTheme}
/>
Dans le code ci-dessus, vous passez plusieurs props 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. Il est utilisé pour la mise en évidence de la syntaxe du bloc de code.
- showLineNumbers: Valeur booléenne indiquant s’il faut ou non afficher les numéros de ligne dans le bloc de code. La valeur par défaut est false.
- 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é. La valeur par défaut est GitHub.
- startingLineNumber: Le numéro de ligne à partir duquel il faut commencer à compter. La valeur par défaut est 1.
- codeBlock: Un objet contenant des options pour le bloc de code. Il peut s’agir de numéros de ligne (un booléen indiquant s’il faut ou non afficher les numéros de ligne) et wrapLines (un booléen indiquant si les lignes doivent être enveloppées ou non).
- onClick: Une fonction à appeler lorsque le bloc de code est cliqué.
Voici un exemple d’utilisation de tous ces accessoires :
import { CodeBlock } from "react-code-blocks";
function MyComponent() {
const handleClick = () => {
console.log("Code block clicked");
};
return (
<CodeBlock
text='const greeting = "Hello, world!"; console.log(greeting);'
language='javascript'
showLineNumbers={true}
theme='atom-one-dark'
startingLineNumber={10}
codeBlock={{ lineNumbers: false, wrapLines: true }}
onClick={handleClick}
/>
);
}
Dans le code ci-dessus, vous utilisez atom-one-dark en commençant les numéros de ligne à 10, en désactivant les numéros de ligne, en activant l’habillage des lignes et en attachant un gestionnaire de clics.
En utilisant ces accessoires, vous pouvez personnaliser l’apparence et le comportement de vos blocs de code en fonction de vos besoins.
Ajouter des 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 la directive thème prop. Par exemple, pour utiliser la propriété atome-un-obscur vous utiliseriez le code suivant :
<CodeBlock
text='console.log("Hello, world!");'
language='javascript'
showLineNumbers={true}
theme='atom-one-dark'
/>
Outre les 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 les différentes parties du bloc de code. Voici un exemple de ce à quoi peut ressembler un objet de thème personnalisé :
const myCustomTheme = {
lineNumberColor: "#ccc",
lineNumberBgColor: "#222",
backgroundColor: "#222",
textColor: "#ccc",
substringColor: "#00ff00",
keywordColor: "#0077ff",
attributeColor: "#ffaa00",
selectorTagColor: "#0077ff",
docTagColor: "#aa00ff",
nameColor: "#f8f8f8",
builtInColor: "#0077ff",
literalColor: "#ffaa00",
bulletColor: "#ffaa00",
codeColor: "#ccc",
additionColor: "#00ff00",
regexpColor: "#f8f8f8",
symbolColor: "#ffaa00",
variableColor: "#ffaa00",
templateVariableColor: "#ffaa00",
linkColor: "#aa00ff",
selectorAttributeColor: "#ffaa00",
selectorPseudoColor: "#aa00ff",
typeColor: "#0077ff",
stringColor: "#00ff00",
selectorIdColor: "#ffaa00",
quoteColor: "#f8f8f8",
templateTagColor: "#ccc",
deletionColor: "#ff0000",
titleColor: "#0077ff",
sectionColor: "#0077ff",
commentColor: "#777",
metaKeywordColor: "#f8f8f8",
metaColor: "#aa00ff",
functionColor: "#0077ff",
numberColor: "#ffaa00",
};
Pour utiliser un thème personnalisé, vous devez transmettre l’objet theme en tant que prop theme du composant CodeBlock :
<CodeBlock
text='console.log("Hello, world!");'
language='javascript'
showLineNumbers={true}
theme={myCustomTheme}
/>
Voici le résultat :
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 générale de votre application.
Ajouter CopyBlock à votre projet
Si vous souhaitez ajouter la fonctionnalité de copie à vos blocs de code, vous pouvez utiliser la fonction CopyBlock composant fourni par la bibliothèque react-code-blocks. Pour utiliser ce composant, vous devez installer l’extension react-copy-to-clipboard également. Voici comment ajouter le composant CopyBlock à votre projet :
Installer la bibliothèque react-copy-to-clipboard bibliothèque :
npm install react-copy-to-clipboard
Importer les composants et bibliothèques nécessaires :
import { CopyBlock } from 'react-code-blocks';
import { FaCopy } from 'react-icons/fa';
import copy from 'copy-to-clipboard';
Utilisez le composant CopyBlock dans votre code :
const code = 'console.log("Hello, world!");';
const language = 'javascript';
<CopyBlock
text={code}
language={language}
showLineNumbers={true}
wrapLines={true}
theme='dracula'
codeBlock
icon={<FaCopy />}
onCopy={() => copy(code)}
/>
Voici le résultat :
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.
Autres méthodes pour ajouter des blocs de code
Bien que l’utilisation de la bibliothèque react-code-blocks soit la manière la plus directe d’ajouter des blocs de code à votre application React, il existe également quelques méthodes alternatives que vous pouvez utiliser :
- Ajouter manuellement la coloration syntaxique: Si vous ne souhaitez pas utiliser une bibliothèque, vous pouvez ajouter manuellement la coloration syntaxique à votre code en utilisant Tailwind CSS ou CSS normal. Il s’agit d’ajouter des classes CSS aux éléments de votre code pour appliquer les styles appropriés. Bien que cette méthode vous permette de mieux contrôler les styles, elle peut être longue à mettre en place et à maintenir.
- Utilisation d’autres bibliothèques: Il existe plusieurs autres bibliothèques qui fournissent une coloration syntaxique du code, telles que react-syntax-highlighter, prism-react-renderer, et highlight.js. Ces bibliothèques ont des caractéristiques et des styles différents, vous pouvez donc choisir celle 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 spécifiques et de vos préférences.
Améliorer 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 des conceptions visuellement attrayantes, vous pouvez améliorer l’expérience de vos utilisateurs et les maintenir engagés avec votre site Web ou votre 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.