Aperçu Markdown en direct
Écrivez du Markdown à gauche, voyez le rendu HTML se mettre à jour à droite, en direct.
Titre de démonstration
Voici du texte avec du gras, de l'italique et du code inline.
Liste
- Premier élément
- Deuxième élément avec un lien
- Troisième élément
Citation
Une citation sur plusieurs mots.
Bloc de code
function bonjour() {
console.log("Salut !")
}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.
Ce que ce parseur gère, et ce qu'il ne gère pas
Le rendu est produit par un parseur maison, écrit en JavaScript pur, sans dépendance. Il couvre le sous-ensemble le plus utilisé du Markdown, listé ci-dessous. Une ligne dont la syntaxe n'est pas reconnue n'est pas perdue : elle s'affiche comme du texte ordinaire, avec ses caractères visibles. Seule exception à connaître, une image  est rendue comme un lien précédé d'un point d'exclamation, puisque sa syntaxe contient celle d'un lien.
| Syntaxe | Résultat | Balise |
|---|---|---|
| # Titre | Titre de niveau 1 à 6 (# à ######) | <h1>…</h1> |
| **gras** | Texte en gras | <strong> |
| *italique* | Texte en italique | <em> |
| `code` | Code inline, jamais réinterprété | <code> |
| [texte](url) | Lien (http, https ou mailto) | <a> |
| - élément | Liste à puces (-, * ou + acceptés) | <ul><li> |
| 1. élément | Liste numérotée | <ol><li> |
| > citation | Citation, fusionnée sur les lignes consécutives | <blockquote> |
| ``` code ``` | Bloc de code délimité | <pre><code> |
Non pris en charge, en toute transparence :
- ×Tableaux (| a | b |)
- ×Images ()
- ×Barres horizontales (---)
- ×Texte barré (~~texte~~)
- ×Listes imbriquées (indentation)
- ×Cases à cocher (- [ ])
- ×Soulignés __gras__ et _italique_
- ×Liens automatiques (une URL nue)
- ×HTML brut inséré dans le texte
Deux comportements méritent d'être signalés. À l'intérieur d'un paragraphe, un simple retour à la ligne devient un <br> : inutile de terminer la ligne par deux espaces comme le veut le Markdown classique. Et le langage indiqué après les trois accents graves d'un bloc de code est accepté à la saisie, mais ignoré au rendu : il n'y a pas de coloration syntaxique.
Le texte saisi ne peut pas devenir du code
La règle d'écriture du parseur est stricte : tout le texte que vous saisissez est échappé avant que la moindre balise ne soit ajoutée, jamais l'inverse. Les caractères &, <, >, le guillemet double et l'apostrophe deviennent des entités HTML. Aucune portion de votre texte n'est donc réinjectée comme balise : les seules balises du rendu sont celles que le parseur construit lui-même. Les URL de liens subissent en plus un filtrage par liste blanche — http, https, mailto et les liens relatifs uniquement — ce qui neutralise les javascript: et autres pseudo-schémas exécutables. 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.
Les titres de niveau 1 à 6, le gras avec **, l'italique avec *, le code inline entre accents graves, les blocs de code délimités par ```, les liens [texte](url), les citations avec >, les listes à puces (-, * ou +) et les listes numérotées. Les tableaux, les images, les barres horizontales, le texte barré, les listes imbriquées et les cases à cocher ne sont pas gérés : le texte correspondant s'affiche tel quel.
Le parseur ne reconnaît que la forme avec astérisques : **gras** et *italique*. La variante avec tirets bas, valable dans la plupart des implémentations de Markdown, n'est pas interprétée ici — c'est un choix de simplicité qui évite de casser les identifiants techniques du type nom_de_variable, très fréquents dans une documentation.
Oui. Tout le texte saisi est échappé avant l'insertion de la moindre balise : les caractères &, <, >, guillemet double et apostrophe sont convertis en entités HTML. Les seules balises présentes dans le rendu sont celles que le parseur construit lui-même. Un texte qui ressemble à du HTML s'affiche donc comme du texte, sans jamais être exécuté.
Il est neutralisé. Seuls les schémas http, https et mailto sont autorisés, ainsi que les liens relatifs et les ancres, qui ne portent pas de schéma. Tout autre schéma — javascript:, data:, vbscript: — est remplacé par un lien inerte vers #. Les liens générés portent par ailleurs rel="noopener noreferrer nofollow".
Non. Le parsing et la génération du rendu HTML se font entièrement dans votre navigateur, en JavaScript, sans bibliothèque externe ni 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.