Rédacteurs et développeurs utilisent l’aperçu Markdown pour contrôler un article, un README ou une documentation avant de les partager.
Prévisualisez le Markdown, pour repérer les écarts de mise en forme avant de copier le résultat. Utilisez-le sans compte dans votre navigateur.
Un rédacteur prépare un article avec des titres, des listes et des liens. Il colle le Markdown, affiche l'aperçu et voit immédiatement si une syntaxe mal placée casse la mise en forme avant de transmettre le texte à un CMS.
Tout l'aperçu est généré dans votre navigateur. Le texte saisi n'est envoyé nulle part, aucun compte n'est nécessaire et le contenu n'est pas conservé par l'outil.
Oui, l'outil accepte des fichiers Markdown, texte, HTML, XML, JSON ou YAML. Une fois importé, le contenu s'affiche dans la zone de saisie et vous pouvez lancer l'aperçu comme avec un texte collé.
Pas toujours. Il montre l'interprétation du Markdown par l'outil, mais chaque plateforme peut appliquer ses propres règles, styles ou extensions. Utilisez l'aperçu pour repérer les erreurs évidentes, puis testez sur la plateforme cible.
L'aperçu vise un rendu sécurisé. Selon la syntaxe contenue, certains éléments peuvent être neutralisés ou ne pas s'afficher. Vérifiez le résultat avant de copier le contenu dans un site ou une application.
# Titre Un texte avec **mise en valeur**.
<h1>Titre</h1> <p>Un texte avec <strong>mise en valeur</strong>.</p>
Le dièse en début de ligne donne un titre de premier niveau. La ligne vide sépare les deux blocs. Les doubles étoiles encadrent les mots qui passent en gras.
- pommes - poires - prunes
<ul> <li>pommes</li> <li>poires</li> <li>prunes</li> </ul>
Chaque tiret ouvre un élément de la liste à puces. Les trois lignes se suivent sans espace vide, ce qui suffit ici, car la liste commence au tout début du texte.
Voir [la documentation](https://spec.commonmark.org/).
<p>Voir <a href="https://spec.commonmark.org/">la documentation</a>.</p>
Les crochets portent le texte visible du lien, les parenthèses l'adresse de destination. Le résultat affiche un mot cliquable qui mène vers la page indiquée.
``` console.log(1); ```
<pre><code>console.log(1); </code></pre>
Trois accents graves ouvrent un bloc de code, puis le ferment sur une ligne à part. Entre les deux, l'instruction garde sa mise en forme sans être interprétée.
| Markdown | HTML produit |
|---|---|
| **gras** | <strong>gras</strong> |
| *italique* | <em>italique</em> |
| `code` | <code>code</code> |
| # Titre | <h1>Titre</h1> |
| [lien](https://exemple.fr) | <a href="https://exemple.fr">lien</a> |
Source : CommonMark Spec 0.31.2 (2024-01-28)
La conversion se fait entièrement dans le navigateur : chaque frappe déclenche la lecture du champ, puis la bibliothèque de rendu produit un fragment HTML. Ce fragment n'est jamais inséré tel quel. Il traverse d'abord un assainisseur qui supprime les balises et les attributs jugés dangereux, notamment les scripts et les gestionnaires d'événements. Seul le résultat filtré rejoint la zone d'aperçu.
Dans la syntaxe courante, une ligne vide marque la frontière entre deux paragraphes. Sans elle, deux lignes voisines sont considérées comme un seul bloc et se retrouvent collées dans le rendu. Une liste à puces réclame elle aussi un espace libre avant son premier tiret, faute de quoi elle reste du texte ordinaire. Ces règles viennent de la spécification CommonMark, que le moteur suit fidèlement.
Certains détails surprennent. Deux espaces placés en fin de ligne forcent un retour à la ligne sans créer de nouveau paragraphe, mais ils deviennent invisibles dans un éditeur qui les efface. Les caractères qui portent la mise en forme, comme l'étoile, le souligné bas ou l'accent grave, doivent être précédés d'une barre oblique inversée pour s'afficher littéralement.
La zone de saisie conserve le texte brut, exactement tel qu'il a été écrit, avec ses espaces et ses symboles. La zone de résultat montre, elle, la version convertie et nettoyée. Comparer les deux aide à repérer une ligne vide oubliée ou un caractère d'échappement manquant.