Astuces Markdown : des solutions pour les fonctions manquantes

Les astuces markdown sont des fragments HTML et des détournements de syntaxe qui reproduisent les fonctions absentes de la spécification markdown de base, du texte souligné aux miniatures vidéo cliquables. Presque toutes ces astuces reposent sur une condition : le moteur de rendu doit accepter le HTML en ligne. CommonMark laisse passer le HTML brut par défaut, donc VS Code, Obsidian, Typora et l'éditeur de ce site affichent ces solutions correctement. Les plateformes qui assainissent le code se comportent autrement. GitHub filtre la sortie avec une liste blanche de balises fixe et supprime chaque attribut style, tandis que Reddit et Discord ignorent totalement le HTML. Chaque section ci-dessous montre la syntaxe et liste les moteurs de rendu qui la conservent ou la suppriment.

Souligner en markdown

Markdown n'a aucune syntaxe de soulignement ; pour souligner en markdown, entourez le texte d'une balise HTML <ins> ou <u>. La balise <ins> marque un texte inséré et s'affiche soulignée dans tous les grands navigateurs. Le filtre de GitHub conserve <ins> et supprime <u>, donc <ins> est le choix portable pour les README.

Submit the form <ins>before 30 June</ins> to qualify.

Obsidian et Typora affichent les deux balises. Bear et Simplenote évitent la voie HTML et proposent leurs propres raccourcis de soulignement. Sur Reddit, les balises apparaissent en texte littéral, car son parseur rejette le HTML.

Indenter des paragraphes

Markdown écrase les espaces en début de ligne et transforme les retraits de 4 espaces en blocs de code ; indentez donc un paragraphe avec l'entité d'espace insécable &nbsp;. Chaque entité survit sous la forme d'un espace visible dans la sortie. Quatre d'entre elles imitent une tabulation classique.

&nbsp;&nbsp;&nbsp;&nbsp;The opening line of this paragraph sits four spaces in.

Les entités passent dans presque tous les moteurs de rendu, GitHub compris, car ce sont des références de caractères et non des balises. La limite apparaît à grande échelle. Un document avec des dizaines de paragraphes indentés devient difficile à lire en version source, et un éditeur avec contrôle des modèles, comme iA Writer, gère l'indentation plus proprement.

Centrer un texte

Pour centrer un texte en markdown, utilisez la balise <center>, ou <p style="text-align:center"> là où le CSS en ligne survit. HTML 4.01 a déprécié <center> dès 1999, mais les navigateurs l'honorent toujours et la plupart des moteurs de rendu markdown la laissent passer telle quelle.

<center>Chapter 7</center>

<p style="text-align:center">Chapter 7</p>

GitHub supprime les attributs style, donc la seconde forme y échoue. Les auteurs de README centrent plutôt logos et badges avec <div align="center">, car l'attribut align survit au filtre de GitHub. Typora et l'aperçu de VS Code affichent tous deux la version CSS telle qu'écrite.

Changer la couleur du texte

Markdown n'offre aucun contrôle de la couleur du texte ; utilisez <span style="color:#0969da"> là où le CSS est autorisé, ou l'ancienne balise <font color="red"> dans les moteurs de rendu qui l'acceptent encore.

<span style="color:#0969da">This sentence renders in blue.</span>

<font color="red">This sentence renders in red.</font>

La balise <font> a été dépréciée en 1999 et les filtres modernes la traitent sévèrement. GitHub supprime aussi bien l'attribut style que l'attribut color, donc aucune des deux formes ne produit de couleur de texte en markdown dans un README. Un substitut courant sur cette plateforme est un bloc de code délimité avec diff comme langage, qui peint en vert les lignes commençant par + et en rouge celles commençant par -. Obsidian et Typora honorent la version <span>, tout comme les sites Hugo et Jekyll qui laissent passer le HTML brut.

Masquer des commentaires

Cachez une note aux lecteurs avec l'astuce de référence de lien [comment]: # ou avec un commentaire HTML standard. Les deux gardent le texte dans le fichier source et hors de la page rendue.

[everything in this line disappears from the output]: #

<!-- This note also stays hidden. -->

L'astuce des crochets détourne les définitions de référence de lien, une fonction de base de markdown, donc elle fonctionne même là où le HTML est bloqué. Placez une ligne vide au-dessus et en dessous, sinon un paragraphe adjacent peut fusionner avec la définition. Le commentaire HTML est plus lisible, mais il reste dans le code source de la page générée, où n'importe qui peut le consulter. GitHub honore les deux méthodes.

Admonitions et encadrés

Créez un encadré avec un emoji et un libellé en gras dans une citation, ou utilisez la syntaxe d'alerte de GitHub, introduite en 2023.

> [!WARNING]
> This command overwrites all 14 archived backups.

> 💡 **Tip:** Blockquote callouts work in any renderer.

GitHub prend en charge 5 types d'alertes : NOTE, TIP, IMPORTANT, WARNING et CAUTION. Chacune s'affiche avec sa propre icône et sa couleur d'accent sur github.com, mais la syntaxe se dégrade en simple citation partout ailleurs. Obsidian possède un format de callout distinct, > [!note], ajouté dans la version 0.14 en 2022, et MkDocs avec le thème Material utilise des lignes !!! note. La citation avec emoji est la seule variante qui reste présentable sur toutes ces plateformes.

Redimensionner des images

Remplacez la syntaxe d'image markdown par une balise <img> et définissez les attributs width et height en pixels.

<img src="diagram.png" alt="Deployment diagram" width="480" height="270">

GitHub conserve les attributs width et height alors qu'il supprime style="width:50%", donc les valeurs en pixels sont la voie fiable pour les README. Des dimensions fixes évitent aussi les décalages de mise en page pendant le chargement. Les moteurs de rendu sans prise en charge du HTML affichent la balise brute en texte, donc gardez la forme simple ![alt](url) sur des plateformes comme Reddit.

Légendes d'images

Ajoutez une légende avec les balises <figure> et <figcaption>, ou placez une ligne en italique juste sous l'image.

<figure>
  <img src="harbor.jpg" alt="Fishing boats at dawn">
  <figcaption>Hobart's harbor, photographed in March 2025.</figcaption>
</figure>

![Fishing boats at dawn](harbor.jpg)
*Hobart's harbor, photographed in March 2025.*

<figure> et <figcaption> figurent toutes deux sur la liste blanche de GitHub, donc la version sémantique fonctionne dans les README. La ligne en italique est la solution de repli pour les moteurs de rendu sans HTML. Les lecteurs d'écran l'annoncent comme du texte courant et non comme une légende, c'est le prix de sa portabilité.

Liens qui s'ouvrent dans un nouvel onglet

Les liens markdown ne peuvent pas s'ouvrir dans un nouvel onglet ; écrivez plutôt l'ancre en HTML brut avec target="_blank".

<a href="https://example.com/report" target="_blank" rel="noopener">2026 annual report</a>

Ajoutez rel="noopener" pour que la nouvelle page ne puisse pas exécuter de script contre la fenêtre qui l'a ouverte. Cette astuce a une portée limitée. GitHub supprime l'attribut target lors de l'assainissement, et chaque lien de README s'ouvre dans le même onglet quoi qu'il arrive. Le procédé fonctionne dans les générateurs de sites statiques comme Hugo et Jekyll, qui laissent passer le HTML tel quel, et c'est là que l'ouverture en nouvel onglet compte le plus.

Symboles et caractères spéciaux

Tapez les symboles directement, puisque les fichiers markdown sont du texte Unicode brut, ou utilisez des entités HTML quand un symbole est difficile d'accès au clavier. Copiez © ou → depuis n'importe quelle page de référence de caractères et collez-le dans le fichier : il s'affiche tel quel.

SymboleEntité HTML
© copyright&copy;
® marque déposée&reg;
™ marque commerciale&trade;
→ flèche droite&rarr;
° degré&#176;
€ euro&euro;

Les entités sont converties dans presque tous les moteurs de rendu, GitHub compris. Le seul piège concerne les blocs de code, où &copy; s'imprime littéralement, car le code délimité désactive le décodage des entités.

Table des matières

Construisez une table des matières sous forme de liste à puces de liens pointant vers les identifiants d'ancre des titres. GitHub, GitLab et la plupart des autres moteurs de rendu génèrent un identifiant pour chaque titre : le texte est mis en minuscules et les espaces deviennent des tirets, la ponctuation étant presque entièrement retirée.

- [Underline Text](#underline-text)
- [Resize Images](#resize-images)
- [Embed Videos](#embed-videos)

Un titre nommé « Resize Images » reçoit l'ancre #resize-images. GitHub affiche aussi un bouton de table des matières automatique sur les en-têtes de README depuis 2021, donc une liste manuelle garde surtout son utilité dans les documents longs sur les autres plateformes. Revérifiez les ancres après chaque modification de titre, car un titre renommé casse ses liens en silence.

Intégrer des vidéos

Markdown ne peut pas intégrer de lecteur vidéo ; liez plutôt une miniature cliquable vers la vidéo. YouTube publie une miniature pour chaque vidéo à une URL prévisible, ce qui rend le procédé simple.

[![How markdown parsing works](https://img.youtube.com/vi/VIDEO-ID/0.jpg)](https://www.youtube.com/watch?v=VIDEO-ID)

Remplacez VIDEO-ID par le code de 11 caractères présent dans l'URL de la vidéo. La miniature s'affiche partout où le markdown standard fonctionne, et un clic ouvre la vidéo sur YouTube. Deux améliorations existent là où la plateforme le permet. GitHub accepte l'envoi direct de fichiers .mp4 et .mov dans les issues, les pull requests, les discussions et les fichiers markdown depuis mai 2021, et les moteurs de rendu avec prise en charge complète du HTML acceptent un <iframe> YouTube collé.

Questions fréquentes

Les astuces markdown fonctionnent-elles sur GitHub ?

Certaines, oui. GitHub conserve <ins>, les attributs width de <img>, <figure>, les commentaires HTML, les entités et sa propre syntaxe d'alerte, mais il supprime chaque attribut style ainsi que l'attribut target. Testez toute astuce dans un gist brouillon avant d'en dépendre, car la liste blanche du filtre peut changer sans préavis.

Pourquoi mon HTML a-t-il disparu de la page rendue ?

Le moteur de rendu bloque entièrement le HTML en ligne, comme le font Reddit et Discord, ou a supprimé la balise ou l'attribut précis que vous avez utilisé lors de l'assainissement. Consultez la documentation de la plateforme pour trouver sa liste blanche, puis remplacez l'élément supprimé par un élément autorisé, comme <div align="center"> à la place d'un attribut style.

Quel style de commentaire choisir, [comment]: # ou <!-- --> ?

Utilisez [comment]: # quand la note doit disparaître complètement, et <!-- --> quand la lisibilité du source compte davantage. La forme entre crochets est consommée par le parseur markdown et n'atteint jamais la sortie, tandis qu'un commentaire HTML standard reste visible pour quiconque affiche le code source de la page.

Essayez l'éditeur Markdown en ligne gratuit

Rédigez du markdown avec un aperçu en direct, ouvrez des fichiers .md et convertissez HTML, Word, PDF et texte, directement dans votre navigateur.

Ouvrir l'éditeur

Plus de guides Markdown