MarkdownCo
Retour au Blog
Guides

Syntaxe étendue Markdown : guide complet avec exemples

Apprenez tous les éléments de la syntaxe étendue Markdown : tableaux, blocs de code, notes de bas de page, listes de tâches, emoji et plus avec des exemples clairs.

Syntaxe étendue Markdown : guide complet avec exemples

La syntaxe de base Markdown couvre la plupart des besoins d'écriture quotidiens, mais parfois vous avez besoin de plus. La syntaxe étendue ajoute des fonctionnalités puissantes comme les tableaux, les notes de bas de page, les listes de tâches et plus encore — transformant Markdown d'un simple outil de formatage en un environnement d'écriture complet.

Tous les processeurs Markdown ne prennent pas en charge tous les éléments de syntaxe étendue. Avant de les utiliser, vérifiez si votre outil ou plateforme prend en charge la fonctionnalité dont vous avez besoin. La bonne nouvelle : la plupart des plateformes modernes — GitHub, GitLab, VS Code et les générateurs de sites statiques populaires — prennent en charge la majorité de ces extensions.

Si vous n'êtes pas encore à l'aise avec les bases, commencez par notre guide de syntaxe de base Markdown.

Tableaux

Markdown Tables

Les tableaux vous permettent d'organiser des données en lignes et colonnes directement dans Markdown. Utilisez des barres verticales (|) pour séparer les colonnes et des tirets (-) pour créer la ligne d'en-tête.

| Feature       | Basic Syntax | Extended Syntax |
| ------------- | ------------ | --------------- |
| Tables        | No           | Yes             |
| Footnotes     | No           | Yes             |
| Task Lists    | No           | Yes             |

Cela produit :

FeatureBasic SyntaxExtended Syntax
TablesNoYes
FootnotesNoYes
Task ListsNoYes

Alignement des colonnes

Contrôlez l'alignement du texte en ajoutant des deux-points à la ligne séparatrice de l'en-tête :

| Left Aligned | Center Aligned | Right Aligned |
| :----------- | :------------: | ------------: |
| Text         |     Text       |          Text |
| More         |     More       |          More |
  • :--- aligne à gauche (par défaut)
  • :---: centre la colonne
  • ---: aligne à droite

Conseils pour les tableaux

  • Vous n'avez pas besoin d'aligner parfaitement les barres verticales dans votre source — c'est juste plus lisible
  • Les tableaux prennent en charge la mise en forme en ligne comme gras, italique, code et liens
  • Les tableaux ne prennent pas en charge les titres, citations, listes ou images dans les cellules
  • Pour des données complexes, envisagez d'utiliser des tableaux HTML

Blocs de code délimités

Markdown Fenced Code Blocks

La syntaxe de base prend en charge les blocs de code indentés, mais les blocs de code délimités sont bien plus pratiques. Entourez votre code de triples accents graves (```) ou de triples tildes (~~~) et spécifiez un langage pour la coloration syntaxique.

```python
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

print(fibonacci(10))
```

Cela s'affiche avec une coloration syntaxique complète :

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

print(fibonacci(10))

Langages pris en charge

La plupart des moteurs de rendu prennent en charge des dizaines d'identifiants de langage. Voici les plus courants :

Language        Identifier
--------------  ----------------
JavaScript      javascript / js
Python          python / py
TypeScript      typescript / ts
HTML            html
CSS             css
JSON            json
Bash            bash / sh
SQL             sql
Markdown        markdown / md

Bonnes pratiques pour les blocs de code

  • Spécifiez toujours un langage — cela active la coloration syntaxique et améliore la lisibilité
  • Utilisez text ou plaintext quand aucun langage ne s'applique
  • Les blocs délimités sont préférés aux blocs indentés car ils prennent en charge la coloration et ne nécessitent pas d'indenter chaque ligne

Notes de bas de page

Markdown Footnotes

Les notes de bas de page vous permettent d'ajouter des notes et des références sans encombrer votre texte principal. Le contenu de la note apparaît en bas de la page.

Markdown was created by John Gruber in 2004.[^1] It has since become
the standard for technical writing.[^2]

[^1]: John Gruber's original Markdown project is documented on
    [Daring Fireball](https://daringfireball.net/projects/markdown/).
[^2]: Markdown is used by GitHub, Stack Overflow, Reddit, and
    countless other platforms.

Les numéros de référence s'affichent comme des liens en exposant dans le texte, avec les notes complètes listées en bas du document.

Règles de syntaxe des notes de bas de page

  • La référence de note utilise [^identifier] — l'identifiant peut être un nombre ou un mot (pas d'espaces)
  • La définition de la note commence par [^identifier]: suivi du contenu
  • Les notes multi-paragraphes nécessitent une indentation (quatre espaces ou un tab) pour les paragraphes suivants
  • Les définitions de notes peuvent être placées n'importe où dans le document — elles s'affichent toujours en bas
Here's a footnote with multiple paragraphs.[^note]

[^note]: This is the first paragraph of the footnote.

    This is the second paragraph, indented with four spaces.

    You can even include code: `console.log("hello")`

IDs de titres

Les IDs de titre personnalisés vous permettent de créer des liens ancres précis vers des sections spécifiques de votre document. Ajoutez l'ID entre accolades après le texte du titre.

### My Custom Section {#custom-section}

Cela génère :

<h3 id="custom-section">My Custom Section</h3>

Lier aux IDs de titres

Une fois qu'un titre a un ID, vous pouvez créer un lien direct vers lui :

Jump to [My Custom Section](#custom-section).

C'est particulièrement utile pour créer une table des matières manuelle en haut de longs documents :

## Contents

- [Introduction](#introduction)
- [Getting Started](#getting-started)
- [Advanced Usage](#advanced-usage)
- [FAQ](#faq)

Note de compatibilité

De nombreux processeurs (dont GitHub) génèrent automatiquement des IDs de titre à partir du texte, même sans la syntaxe {#id}. Cependant, définir explicitement les IDs vous donne un contrôle total et assure un comportement cohérent entre les plateformes.

Listes de définitions

Les listes de définitions sont parfaites pour les glossaires, les FAQ et tout contenu nécessitant d'associer des termes à leurs explications.

Markdown
: A lightweight markup language for creating formatted text
  using a plain-text editor.

HTML
: The standard markup language for documents designed to be
  displayed in a web browser.

YAML
: A human-readable data serialization language commonly used
  for configuration files.

Cela génère le HTML suivant :

<dl>
  <dt>Markdown</dt>
  <dd>A lightweight markup language for creating formatted text
      using a plain-text editor.</dd>
  <dt>HTML</dt>
  <dd>The standard markup language for documents designed to be
      displayed in a web browser.</dd>
</dl>

Définitions multiples

Un terme peut avoir plusieurs définitions :

Markdown
: A lightweight markup language.
: A tool used by developers and writers worldwide.

Note de compatibilité

Les listes de définitions ne sont pas prises en charge par tous les processeurs. GitHub Flavored Markdown ne les prend pas en charge, mais de nombreux générateurs de sites statiques et outils de documentation le font.

Texte barré

Le texte barré affiche une ligne horizontale à travers le texte, indiquant un contenu supprimé ou obsolète. Entourez le texte de doubles tildes (~~).

The project deadline is ~~Friday~~ Monday.
~~Old information~~ has been replaced with updated content.

Cela s'affiche ainsi :

The project deadline is Friday Monday.

Sortie HTML :

<p>The project deadline is <del>Friday</del> Monday.</p>

Le texte barré est largement pris en charge — il fait partie de GitHub Flavored Markdown (GFM) et fonctionne sur la plupart des plateformes modernes.

Listes de tâches

Markdown Task Lists

Les listes de tâches (aussi appelées cases à cocher ou listes de choses à faire) créent des checklists interactives. Utilisez - [ ] pour les éléments non cochés et - [x] pour les éléments cochés.

- [x] Research extended syntax features
- [x] Write first draft
- [x] Add code examples for each section
- [ ] Create cover image
- [ ] Proofread and edit
- [ ] Publish the article

Cela s'affiche ainsi :

  • Research extended syntax features
  • Write first draft
  • Add code examples for each section
  • Create cover image
  • Proofread and edit
  • Publish the article

Cas d'utilisation des listes de tâches

Les listes de tâches sont particulièrement populaires dans :

  • Les issues et pull requests GitHub — suivre la progression des éléments de travail
  • La documentation de projet — détailler les étapes d'un processus
  • Les notes de réunion — capturer les actions à mener avec leur statut

Sur des plateformes comme GitHub, ces cases à cocher sont interactives — vous pouvez cliquer pour les basculer directement dans la vue rendue.

Emoji

Il existe deux façons d'ajouter des emoji à vos documents Markdown.

Copier-coller

L'approche la plus simple — copiez simplement un emoji depuis n'importe quelle source et collez-le directement dans votre texte :

That's a great idea! 🎉 Let's ship it! 🚀

Cela fonctionne partout car les emoji sont des caractères Unicode standard.

Codes courts

Certaines plateformes prennent en charge les codes courts d'emoji — des mots-clés entourés de deux-points :

:smile: :rocket: :thumbsup: :warning: :heavy_check_mark:

Les codes courts courants incluent :

Shortcode              Emoji
---------------------  -----
:smile:                😄
:rocket:               🚀
:thumbsup:             👍
:warning:              ⚠️
:heavy_check_mark:     ✔️
:x:                    ❌
:fire:                 🔥
:star:                 ⭐

Note de compatibilité

Les codes courts d'emoji varient selon les plateformes. GitHub, Slack et Discord prennent chacun en charge des ensembles différents. Les emoji copiés-collés fonctionnent universellement et sont le choix le plus sûr pour les documents multiplateformes.

Surlignage

Le surlignage attire l'attention sur des mots ou phrases clés en leur donnant un fond coloré. Entourez le texte de doubles signes égal (==).

This is ==critically important== information.

Cela génère :

<p>This is <mark>critically important</mark> information.</p>

Alternative HTML

Si votre processeur Markdown ne prend pas en charge la syntaxe ==, utilisez directement la balise HTML <mark> :

This is <mark>critically important</mark> information.

Les deux approches produisent le même résultat — du texte surligné qui se distingue du contenu environnant.

Note de compatibilité

La syntaxe ==highlight== n'est pas largement prise en charge. Elle fonctionne dans certains processeurs mais pas dans GitHub Flavored Markdown. Si la compatibilité est importante, utilisez la balise HTML <mark>.

Indice et exposant

Ces éléments sont essentiels pour la notation scientifique, les expressions mathématiques et les formules chimiques.

Indice

Utilisez des tildes simples (~) pour entourer le texte en indice :

The chemical formula for water is H~2~O.
Carbon dioxide is CO~2~.

Cela s'affiche ainsi : H2O et CO2.

Équivalent HTML :

<p>The chemical formula for water is H<sub>2</sub>O.</p>

Exposant

Utilisez des accents circonflexes (^) pour entourer le texte en exposant :

The equation is E = mc^2^.
This is the 3^rd^ edition.

Cela s'affiche ainsi : E = mc2 et 3e édition.

Équivalent HTML :

<p>The equation is E = mc<sup>2</sup>.</p>

Alternative HTML

Si votre processeur ne prend pas en charge la syntaxe ~ et ^, utilisez directement les balises HTML :

H<sub>2</sub>O is water.
E = mc<sup>2</sup> is Einstein's famous equation.

Cette approche HTML fonctionne dans pratiquement tous les moteurs de rendu Markdown.

Liens URL automatiques

La plupart des processeurs Markdown convertissent automatiquement les URLs brutes en liens cliquables sans syntaxe spéciale :

Visit https://example.com for more information.

Cela s'affiche comme un lien cliquable même sans la syntaxe [text](url).

Désactiver les liens automatiques

Parfois, vous souhaitez afficher une URL comme texte brut sans la rendre cliquable. Entourez-la d'accents graves pour l'afficher comme code en ligne :

`https://example.com`

Cela affiche l'URL comme du code plutôt qu'un lien cliquable — utile pour la documentation où vous expliquez des modèles d'URL plutôt que d'y renvoyer.

Quand utiliser des liens explicites

Bien que les liens automatiques soient pratiques, la syntaxe de lien explicite offre plus de contrôle :

<!-- Automatic: shows raw URL -->
https://example.com

<!-- Explicit: shows custom text -->
[Visit our website](https://example.com)

Utilisez des liens explicites lorsque vous souhaitez un texte d'ancrage descriptif — c'est meilleur pour la lisibilité et le SEO.

Référence rapide

Markdown Extended Syntax Quick Reference

Voici tous les éléments de syntaxe étendue en un coup d'œil :

Element              Syntax                     Support
-------------------  -------------------------  --------
Table                | Col | Col |              Wide
Fenced Code Block    ``` code ```               Wide
Footnote             [^1] / [^1]: text          Moderate
Heading ID           ### Heading {#id}          Moderate
Definition List      Term / : Definition        Limited
Strikethrough        ~~text~~                   Wide
Task List            - [x] / - [ ]             Wide
Emoji (shortcode)    :emoji_name:               Varies
Highlight            ==text==                   Limited
Subscript            H~2~O                      Limited
Superscript          X^2^                       Limited
Auto URL Link        https://...                Wide

Commencez à utiliser la syntaxe étendue

Vous connaissez maintenant tous les éléments principaux de la syntaxe étendue. Voici comment les mettre en pratique :

  1. Vérifiez votre plateforme : Confirmez quelles fonctionnalités votre processeur Markdown prend en charge. GitHub, VS Code et la plupart des générateurs de sites statiques gèrent bien les éléments largement supportés.

  2. Utilisez les alternatives HTML : Pour les fonctionnalités à support limité (surlignage, indice, exposant), les alternatives avec balises HTML fonctionnent presque partout.

  3. Pratiquez avec du vrai contenu : Essayez d'ajouter un tableau à votre prochain README, des notes de bas de page à votre prochain article de blog ou des listes de tâches à votre prochain plan de projet.

  4. Convertissez en toute confiance : Quand votre document est prêt à être partagé, convertissez Markdown en PDF pour une sortie imprimable avec support LaTeX et tableaux, exportez en HTML pour la publication web, ou générez un document Word pour la revue par les parties prenantes — tous les éléments de syntaxe étendue inclus.

Entre la syntaxe de base et ces fonctionnalités étendues, vous disposez maintenant de la boîte à outils Markdown complète. Si vous débutez avec Markdown, commencez par Qu'est-ce que Markdown pour les fondamentaux. Que vous rédigiez de la documentation, des articles de blog, des spécifications techniques ou des plans de projet — Markdown a tout ce qu'il vous faut.

MarkdownSyntaxe étendueRédactionProductivité