The Wayback Machine - https://web.archive.org/web/20230317154536/https://docs.github.com/fr/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/quickstart-for-writing-on-github
Skip to main content
We publish frequent updates to our documentation, and translation of this page may still be in progress. For the most current information, please visit the English documentation.
All products
Bien démarrer

Quickstart for writing on GitHub

In this article

Learn advanced formatting features by creating a README for your GitHub profile.

Démarrage rapide pour l’écriture sur GitHub

Découvrez les fonctionnalités de mise en forme avancées en créant un README pour votre profil GitHub . Démarrage rapide Introduction

Markdown est un langage facile à lire et à écrire pour mettre en forme du texte brut.

Vous pouvez utiliser la syntaxe Markdown ainsi que d’autres balises HTML pour mettre en forme ce que vous écrivez sur GitHub, à des emplacements comme des fichiers README d’un dépôt, et des commentaires sur des demandes de tirage et des problèmes.

Dans ce guide, vous allez découvrir certaines fonctionnalités de mise en forme avancées en créant ou en modifiant un fichier README pour votre profil GitHub . Si vous débutez avec Markdown, vous pouvez commencer par « Syntaxe d’écriture et de mise en forme de base » ou par le cours Communiquer en utilisant Markdown GitHub Skills.

Si vous disposez déjà d’un fichier README de profil, vous pouvez suivre ce guide en ajoutant des éléments à votre fichier README existant ou en créant un Gist avec un fichier Markdown que vous pouvez appeler about-me.md.

Pour plus d’informations, consultez « Création de Gists ».

Création ou modification du fichier README de votre profil

  1. Le fichier README de votre profil vous permet de partager des informations sur vous-même avec la communauté sur GitHub.com. Le fichier README s’affiche en haut de la page de votre profil.
  2. Si vous n’avez pas déjà un fichier README de profil, vous pouvez en ajouter un.

Créez un dépôt portant le même nom que votre nom d’utilisateur GitHub en initialisant le dépôt avec un fichier README.md.

Pour plus d’informations, consultez « Gestion de votre README de profil ».

  1. Éditer le fichier README.md et supprimez le texte du modèle (qui commence par ### Hi there) qui est automatiquement ajouté quand vous créez le fichier.

    Si vous avez déjà un fichier README de profil, vous pouvez l’éditer à partir de la page de votre profil.

  2. En haut à droite de n’importe quelle page GitHub, cliquez sur votre photo de profil, puis sur Votre profil.

Cliquez sur en regard de votre fichier README de profil.

Capture d’écran d’une page de profil, avec l’icône de crayon mise en surbrillance en regard du fichier README de profil

Ajout d’une image adaptée à vos visiteurs Vous pouvez inclure des images dans votre communication sur GitHub.

  1. Vous allez ajouter ici une image réactive, comme une bannière, en haut de votre fichier README de profil.

    HTML
    <picture>
 <source media="(prefers-color-scheme: dark)" srcset="YOUR-DARKMODE-IMAGE">
 <source media="(prefers-color-scheme: light)" srcset="YOUR-LIGHTMODE-IMAGE">
 <img alt="YOUR-ALT-TEXT" src="YOUR-DEFAULT-IMAGE">
</picture>

  2. En utilisant l’élément HTML <picture> avec la fonctionnalité multimédia prefers-color-scheme, vous pouvez ajouter une image qui change selon qu’un visiteur utilise le mode clair ou sombre. Pour plus d’informations, consultez « Gestion de vos paramètres de thème ».

    • Copiez et collez le balisage suivant dans votre fichier README.md.
    • Remplacez les espaces réservés dans le balisage par les URL des images choisies.
    • Sinon, pour essayer d’abord la fonctionnalité, vous pouvez copier les URL depuis notre exemple ci-dessous.

  3. Remplacez YOUR-DARKMODE-IMAGE par l’URL d’une image à afficher pour les visiteurs en mode sombre.

  4. Remplacez YOUR-LIGHTMODE-IMAGE par l’URL d’une image à afficher pour les visiteurs en mode clair.

Remplacez YOUR-DEFAULT-IMAGE par l’URL d’une image à afficher si aucune des autres images ne peut être mise en correspondance, par exemple si le visiteur utilise un navigateur qui ne prend pas en charge la fonctionnalité prefers-color-scheme.

Pour rendre l’image accessible aux visiteurs qui utilisent un lecteur d’écran, remplacez YOUR-ALT-TEXT par une description de l’image.

Pour vérifier que l’image est rendue correctement, cliquez sur l’onglet Aperçu.

Pour plus d’informations sur l’utilisation d’images dans Markdown, consultez « Syntaxe de base pour l’écriture et la mise en forme ».

Exemple d’image réactive

```HTML

Shows an illustrated sun in light mode and a moon with stars in dark mode. ```

Apparence de l’image Capture d’écran de l’onglet Aperçu en mode clair, montant l’image d’un soleil qui sourit Ajout d’un tableau

  1. Vous pouvez utiliser des tableaux Markdown pour organiser les informations.

  2. Vous allez utiliser ici un tableau pour vous présenter en classant quelque chose, par exemple les langages de programmation ou les frameworks que vous utilisez le plus, les choses que vous apprenez ou vos passe-temps préférés.

    ## About me

Hi, I'm Mona. You might recognize me as GitHub's mascot.

  3. Quand une colonne de tableau contient des nombres, il est pratique d’aligner la colonne à droite en utilisant la syntaxe --: sous la ligne d’en-tête.

    Markdown
    | Rank | THING-TO-RANK |
|-----:|---------------|
|     1|               |
|     2|               |
|     3|               |

  4. Revenez à l’onglet Modifier le fichier.

  5. Pour vous présenter, deux lignes sous la balise </picture>, ajoutez un en-tête ## About me et un court paragraphe sur vous-même, comme suit.

Deux lignes sous ce paragraphe, insérez un tableau en copiant et collant le balisage suivant.

Dans la colonne de droite, remplacez THING-TO-RANK par « Langages », « Passe-temps » ou autre chose, puis renseignez la colonne avec votre liste d’éléments.

## About me

Hi, I'm Mona. You might recognize me as GitHub's mascot.

| Rank | Languages |
|-----:|-----------|
|     1| Javascript|
|     2| Python    |
|     3| SQL       |

Pour vérifier que le tableau est rendu correctement, cliquez sur l’onglet Aperçu.

Pour plus d’informations, consultez « [Organisation des informations avec des tableaux](/get-started/writing-on-github/working-with-advanced-formatting/organizing-information-with-tables) ».

Exemple de table

Apparence de la table

  1. Capture d’écran de l’onglet Aperçu, montrant un en-tête « À propos de moi » et un tableau affiché avec une liste de langages

    HTML
    <details>
<summary>My top THINGS-TO-RANK</summary>

YOUR TABLE

</details>

  2. Ajout d’une section réduite

  3. Pour garder votre contenu bien ordonné, vous pouvez utiliser la balise <details> pour créer une section réduite extensible.

    <details open>

  4. Pour créer une section réduite pour le tableau que vous avez créé, encapsulez votre table dans des balises <details> ,comme dans l’exemple suivant.

Entre les balises <summary>, remplacez THINGS-TO-RANK par ce que vous avez classé dans votre tableau.

<details>
<summary>My top languages</summary>

| Rank | Languages |
|-----:|-----------|
|     1| Javascript|
|     2| Python    |
|     3| SQL       |

</details>

Si vous le souhaitez, pour que la section s’affiche ouverte par défaut, ajoutez l’attribut open à la balise <details>.

Pour vérifier que la section réduite est rendue correctement, cliquez sur l’onglet **Aperçu**.

Exemple de section réduite

Apparence de la section réduite Capture d’écran de l’onglet Aperçu, avec une section réduite appelée « My top languages » (Mes langages préférés) marquée d’une flèche déroulante

  1. Ajout d’une citation

    ---

  2. Markdown propose de nombreuses autres options pour la mise en forme de votre contenu.

    > QUOTE

    Vous allez ajouter ici une règle horizontale pour diviser votre page et un bloc de citation pour mettre en forme votre citation préférée. Dans le bas de votre fichier, deux lignes sous la balise </details>, ajoutez une règle horizontale en tapant trois tirets ou plus.

  3. Sous la ligne ---, ajoutez une citation en tapant un balisage comme ceci.

Remplacez QUOTE par une citation de votre choix.

---
> If we pull together and commit ourselves, then we can push through anything.

— Mona the Octocat

Vous pouvez aussi copier la citation depuis notre exemple ci-dessous.

Pour vérifier tout est rendu correctement, cliquez sur l’onglet **Aperçu**.

Exemple de citation

Apparence de la citation Capture d’écran de l’onglet Aperçu, avec une citation en retrait sous une ligne horizontale épaisse

  1. Ajout d’un commentaire

    <!-- COMMENT -->

    Vous pouvez utiliser la syntaxe des commentaires HTML pour ajouter un commentaire qui sera masqué dans la sortie.

  2. Vous allez ajouter ici un commentaire pour vous rappeler de mettre à jour votre fichier README ultérieurement.

Deux lignes sous l’en-tête ## About me, insérez un commentaire en utilisant le balisage suivant.

## About me

<!-- TO DO: add more details about me later -->

Remplacez COMMENT par un élément « à faire » que vous devez vous rappeler de faire plus tard (par exemple ajouter d’autres éléments au tableau).

Pour vérifier que votre commentaire est masqué dans la sortie, cliquez sur l’onglet Aperçu.

  • Exemple de commentaire
  • Enregistrement de votre travail

Quand vous êtes satisfait de vos modifications, enregistrez votre fichier README de profil en cliquant sur Commiter les modifications.](/assets/images/help/profile/readme-commit-changes.png)

Le fait de commiter directement dans la branche main rendra vos modifications visibles par tous les visiteurs de votre profil.

Si vous voulez enregistrer votre travail mais que vous n’êtes pas prêt à le rendre visible sur votre profil, vous pouvez sélectionner Créer une branche pour ce commit et démarrer une demande de tirage.

  • Capture d’écran de la section « Commiter les modifications »
  • Étapes suivantes Continuez à découvrir les fonctionnalités avancées de mise en forme.