Ajouter des blocs de code à son site web

1. Introduction

Si tu veux afficher des extraits de code propres, lisibles et facilement copiables sur ton site, ce tutoriel est pour toi. Nous allons créer un composant CodeBlock avec surlignage de syntaxe et un bouton de copie.

2. Installer les dépendances nécessaires

Nous allons utiliser :

react-copy-to-clipboard pour la copie du code,
react-syntax-highlighter pour la coloration syntaxique et
react-icons pour les icônes.

npm install react-copy-to-clipboard react-syntax-highlighter react-icons

3. Créer un composant CodeBlock

Dans ton dossier components/CodeBlock.js :


"use client";
import { useState } from "react";
import { CopyToClipboard } from "react-copy-to-clipboard";
import { FiClipboard, FiCheck } from "react-icons/fi";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { dracula } from "react-syntax-highlighter/dist/esm/styles/prism"; // Tu peux changer le thème ici

export default function CodeBlock({ code, language = "javascript" }) {
    const [copied, setCopied] = useState(false);

    const handleCopy = () => {
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
    };

    return (
        <div className="relative text-sm rounded-md overflow-hidden">
            <CopyToClipboard text={code} onCopy={handleCopy}>
                <button
                    className="absolute top-2 right-2 z-10 text-xs bg-gray-800 hover:bg-gray-700 text-white p-2 rounded transition"
                    aria-label="Copy to clipboard"
                >
                    {copied ? <FiCheck className="text-green-400" /> : <FiClipboard />}
                </button>
            </CopyToClipboard>
            <SyntaxHighlighter
                language={language}
                style={dracula}
                customStyle={{
                    padding: "1.5rem 1rem 1rem", // top right/left bottom
                    borderRadius: "0.5rem",
                    backgroundColor: "#282a36",
                    margin: 0,
                }}
                wrapLines={true}
                wrapLongLines={true}
            >
                {code}
            </SyntaxHighlighter>

        </div>
    );
}

Tu peux maintenant utiliser ce composant dans toutes les pages où tu veux l'utiliser.

4. Utiliser le composant dans une page

Voici un exemple d'utilisation du composant CodeBlock dans une page:


import CodeBlock from "@/components/CodeBlock" // Le chemin vers ton composant CodeBlock

const exemple = `function helloWorld() {
  console.log("Hello, world!")
}`

export default function Page() {
  return (
    <div className="p-6">
      <CodeBlock code={exemple} language="javascript" />
    </div>
  )
}

Les langages les plus utiles pour CodeBlock

Types de code	Langage (language)
Commandes terminal	bash
HTML	html
CSS	css
Javascript (client)	javascript
Nodejs (backend)	javascript
Typescript	typescript
JSON	json
Markdown	markdown

Pour avoir une idée des différents thèmes que tu pourrais utiliser pour tes blocs de code, tu peux utiliser ce site.

Conclusion

Afficher du code sur un site web devient simple et propre grâce à un composant comme CodeBlock. Avec la possibilité de copier en un clic et de préciser le langage, tu améliores l'expérience de lecture et de partage de contenu technique.

← Retour au blog