Cheat Sheet Github

1. Installation de Git

Pour utiliser Git, tu peux passer par GitHub ou GitLab. GitHub met à disposition plusieurs applications desktop pratiques, ainsi qu'un outil en ligne de commande toujours à jour:

  • GitHub Desktop une interface graphique simple et intuitive, disponible sur Windows et macOS.
  • GitHub CLI une interface en ligne de commande puissante, maintenue à jour automatiquement, pour gérer dépôts, issues, pull requests, releases et bien d'autres directement depuis le terminal.

Cette combinaison d'outils facilite le travail collaboratif sur GitHub, en proposant une prise en main rapide aux débutants grâce à GitHub Desktop, et une flexibilité maximale aux utilisateurs avancés grâce à la GitHub CLI.

2. Installer les dépendances nécessaires

Nous allons utiliser :

  • GitHub Desktop une interface graphique simple et intuitive, disponible sur Windows et macOS.
  • GitHub CLI une interface en ligne de commande puissante, maintenue à jour automatiquement, pour gérer dépôts, issues, pull requests, releases et bien d'autres directement depuis le terminal. 
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 codeLangage (language)
Commandes terminalbash
HTMLhtml
CSScss
Javascript (client)javascript
Nodejs (backend)javascript
Typescripttypescript
JSONjson
Markdownmarkdown

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