MyDevTools
FR

Aperçu Markdown

Écrivez du Markdown avec un aperçu HTML en direct côte à côte : tableaux GFM, listes de tâches, texte barré. Copiez le HTML assaini ou téléchargez un .html.

Vos saisies et fichiers restent dans le navigateur

Écrivez ou collez du Markdown ici, ou chargez un exemple.

Aperçu

L’aperçu rendu s’affiche ici pendant la saisie.

Sur cette page

Tapez du Markdown d’un côté et voyez le rendu de l’autre pendant la saisie — pratique pour rédiger des README, des commentaires d’issues, de la documentation ou des notes de version, puis les exporter en HTML.

Fonctionnalité détaillée

Le rendu utilise la bibliothèque marked avec GitHub Flavored Markdown : tableaux, listes de tâches - [x], texte barré ~~text~~, blocs de code délimités et liens automatiques pour les URL nues. Un simple saut de ligne devient <br>, comme dans les commentaires GitHub : les lignes ne sont pas fusionnées en un seul paragraphe. Les blocs de code s’affichent en police à chasse fixe, sans coloration syntaxique.

Le HTML brut présent dans le Markdown est assaini : scripts, iframes, formulaires, styles et attributs d’événement comme onclick sont supprimés et les liens javascript: bloqués, tandis que les balises inoffensives comme <kbd>, <details> ou <sub> sont conservées. Les liens s’ouvrent dans un nouvel onglet. Dans l’aperçu, les titres sont affichés un niveau plus bas pour ne pas concurrencer le titre de la page ; Copier HTML et Télécharger HTML conservent les <h1>–<h6> d’origine.

La barre d’outils insère au curseur la syntaxe du gras, de l’italique, d’un titre, d’un lien, d’une image, du code en ligne et d’une liste, et Synchroniser le défilement garde les deux volets à la même position relative. Tout s’exécute dans le navigateur et l’outil n’enregistre pas votre texte — copiez-le avant de fermer la page.

Exemples pratiques

Liste de tâches : - [x] tests et - [ ] docs s’affichent comme une case cochée et une case non cochée.

Sauts de ligne : les deux lignes line one et line two ~~old~~ deviennent <p>line one<br>line two <del>old</del></p>.

Tableau : les lignes | A | B |, |---|---|, | 1 | 2 | deviennent un tableau HTML avec une ligne d’en-tête.

HTML dangereux : <script>alert(1)</script><b onclick=x>hi</b> est exporté uniquement comme <b>hi</b>.

Comment utiliser cet outil

  1. Écrivez en Markdown

    Tapez dans l’Éditeur Markdown. Un document d’exemple s’affiche à la première ouverture ; cliquez sur Effacer pour partir d’une page vide.

  2. Mettez en forme avec la barre d’outils

    Sélectionnez du texte et utilisez les boutons de Mise en forme (gras, italique, titre, lien, image, code, liste) pour insérer la syntaxe.

  3. Vérifiez l’aperçu

    Le volet Aperçu se met à jour à chaque frappe ; activez Synchroniser le défilement pour faire défiler les deux volets ensemble.

  4. Exportez

    Utilisez Copier HTML ou Copier Markdown, ou Télécharger HTML pour enregistrer markdown-preview.html avec des styles de base.

Conseils et bonnes pratiques

  • Les chemins d’image relatifs comme img/logo.png ne peuvent pas être résolus ici ; utilisez des URL https:// complètes pour voir les images.
  • Les images d’autres sites sont chargées par votre navigateur directement depuis leurs serveurs.
  • Les ajouts propres à GitHub — @mentions, raccourcis emoji comme :smile:, diagrammes Mermaid et formules mathématiques — s’affichent en texte brut.
  • Le HTML en ligne comme <kbd>Ctrl</kbd> ou <details> fonctionne, mais les attributs style et class sont supprimés.
  • Le fichier téléchargé est une page autonome aux styles clairs, prête à imprimer ou à joindre.