Aperçu Markdown en direct
Écrivez du Markdown à gauche, voyez le rendu HTML se mettre à jour à droite, en direct.
Titre de démonstration
Du gras, de l'italique, du barré, du surligné, du code inline,
H2O, E = mc2 et un emoji 🚀.
Tableau
| Outil | Catégorie | Prix |
|---|---|---|
| Aperçu Markdown | Développeur | 0 € |
| OCR image en texte | Convertisseurs | 0 € |
Listes
- Première étape
- sous-point imbriqué
- un lien
- Deuxième étape
Astuce
Les alertes GitHub sont prises en charge.
Bloc de code
function bonjour() {
console.log("Salut !")
}
Une note de bas de page[1].
Le texte de la note. ↩︎
Qu'est-ce que le Markdown ?
Le Markdown est une syntaxe de mise en forme qui utilise des caractères ordinaires — un # pour un titre, deux astérisques pour du gras — plutôt que des balises ou un éditeur visuel. Son principe fondateur : le texte source doit rester lisible tel quel, avant même d'être converti. C'est ce qui en a fait le format par défaut des fichiers README, des tickets, des commentaires de code et de la plupart des générateurs de sites statiques.
Il n'existe pas un Markdown mais plusieurs dialectes : la spécification originelle de 2004, CommonMark qui l'a précisée, et le GitHub Flavored Markdown qui y ajoute tableaux, cases à cocher et texte barré. Un même fichier peut donc se rendre différemment d'une plateforme à l'autre — d'où l'intérêt de vérifier un rendu avant de publier.
Syntaxe prise en charge : CommonMark, GFM et extensions
Le rendu est produit par markdown-it, un moteur entièrement conforme à la spécification CommonMark, complété par les extensions du GitHub Flavored Markdown et les plus répandues des autres dialectes. Un README qui s'affiche correctement sur GitHub s'affiche donc de la même façon ici, tableaux et cases à cocher compris.
| Syntaxe | Résultat | Balise |
|---|---|---|
| # Titre | Titres de niveau 1 à 6, ou soulignés par === / --- | <h1>…<h6> |
| **gras** __gras__ | Gras, avec astérisques ou tirets bas | <strong> |
| *italique* _italique_ | Italique | <em> |
| ~~barré~~ | Texte barré (GFM) | <s> |
| ==surligné== | Texte surligné | <mark> |
| H~2~O x^2^ | Indice et exposant | <sub> <sup> |
| `code` | Code inline | <code> |
| ```js code ``` | Bloc de code (clôturé ou indenté de 4 espaces) | <pre><code> |
| [texte](url) | Lien, y compris par référence [texte][ref] | <a> |
| https://… | URL nue transformée en lien (GFM) | <a> |
|  | Image | <img> |
| - élément | Liste à puces, imbricable par indentation | <ul><li> |
| 1. élément | Liste numérotée, imbricable | <ol><li> |
| - [x] fait | Liste de tâches (GFM) | <input type=checkbox> |
| | a | b | |:--|--:| | Tableau avec alignement de colonnes (GFM) | <table> |
| > citation | Citation, imbricable (> >) | <blockquote> |
| > [!NOTE] | Alerte GitHub : NOTE, TIP, IMPORTANT, WARNING, CAUTION | <div> |
| --- | Ligne horizontale | <hr> |
| texte[^1] [^1]: note | Note de bas de page | <sup> + <section> |
| Terme : définition | Liste de définitions | <dl> |
| *[HTML]: HyperText… | Abréviation expliquée au survol | <abbr> |
| :rocket: | Emoji par code court | 🚀 |
| <details>, <kbd>… | HTML brut, filtré par liste blanche | balise d'origine |
Non pris en charge, en toute transparence :
- ×Formules mathématiques ($…$) : affichées en texte
- ×Diagrammes Mermaid : affichés comme bloc de code
- ×Coloration syntaxique des blocs de code
- ×HTML dangereux : <script>, <iframe>, <style>, attributs on…
Un comportement mérite d'être signalé, car il surprend souvent : comme sur GitHub, un simple retour à la ligne à l'intérieur d'un paragraphe devient un espace. Terminez la ligne par deux espaces ou par \ pour forcer un saut de ligne, ou laissez une ligne vide pour ouvrir un nouveau paragraphe.
Le texte saisi ne peut pas devenir du code
Le texte Markdown est échappé par le moteur avant la construction des balises : un < tapé dans un paragraphe s'affiche comme un caractère, jamais comme une balise. Le HTML brut, que le Markdown autorise, passe par une liste blanche inspirée de celle de GitHub : les balises de mise en forme sont conservées, tandis que <script>, <iframe>, les styles et les gestionnaires d'événements sont retirés. Les URL en javascript: et autres pseudo-schémas exécutables sont refusées dans les liens comme dans les images. C'est ce qui rend l'outil utilisable sur du Markdown que vous n'avez pas écrit vous-même : un README récupéré, un commentaire d'utilisateur, un export.
Tout CommonMark, la spécification de référence du Markdown, et toutes les extensions du GitHub Flavored Markdown : tableaux avec alignement, texte barré, listes de tâches, liens automatiques et alertes. S'y ajoutent les extensions courantes : notes de bas de page, listes de définitions, abréviations, surlignage, indice, exposant et emojis par code court. Le tableau de cette page détaille chaque syntaxe.
C'est la règle du Markdown standard, appliquée aussi par GitHub dans les fichiers README : un simple retour à la ligne à l'intérieur d'un paragraphe est traité comme un espace. Pour forcer un saut de ligne, terminez la ligne par deux espaces ou par une barre oblique inversée (\). Pour commencer un nouveau paragraphe, laissez une ligne vide.
Oui, comme sur GitHub : les balises de mise en forme et de structure sont rendues (details et summary, kbd, sup, sub, br, img, div align, tableaux HTML…). Tout ce qui pourrait exécuter du code est retiré avant affichage : balises script, style, iframe, object, gestionnaires d'événements comme onclick, et URL en javascript:.
Il n'est pas rendu comme lien. Les schémas javascript:, vbscript: et file: sont refusés, ainsi que data: sauf pour les images (PNG, JPEG, GIF, WebP). Les liens vers d'autres sites s'ouvrent dans un nouvel onglet avec rel="noopener noreferrer nofollow".
Non. L'analyse et le rendu se font entièrement dans votre navigateur, en JavaScript, sans appel réseau. Rien n'est sauvegardé automatiquement non plus : si vous quittez la page, le texte est perdu. Utilisez le bouton « Copier le Markdown » avant de fermer l'onglet.