Comment convertir entre HTML et Markdown

Collez le HTML ou le Markdown dans le champ et appuyez sur Markdown devient HTML ou HTML vers Markdown. Le texte converti apparaît dans la zone de résultat sous les boutons, prêt pour Copier, et Effacer vide les deux zones avant le document suivant. L'entrée est un seul champ de texte et la sortie est aussi du texte : il n'y a ni téléversement de fichier ni traitement par lot. La conversion s'exécute dans le navigateur : le texte n'est pas téléversé et la page continue de fonctionner lorsque le réseau tombe.

Le Markdown produit est du GitHub Flavored Markdown (tableaux à barres verticales, blocs de code délimités, listes imbriquées) et le HTML renvoyé est du HTML simple, sans mise en forme. La conversion réécrit le balisage ; elle ne copie pas la page rendue, donc les classes CSS, les styles en ligne et les scripts ne font pas partie du résultat.

  1. Collez le HTML ou le Markdown dans le champ en haut de la page. Markdown, par exemple remplit le champ avec un court échantillon si vous voulez voir les deux sens avant d'utiliser votre propre texte.
  2. Appuyez sur Markdown devient HTML pour transformer du balisage en Markdown, ou sur HTML vers Markdown pour le sens inverse. Les deux boutons lisent le même champ : un document peut donc être converti dans les deux sens sans recharger la page.
  3. Lisez la zone de résultat sous les boutons : elle ne contient que le texte converti, et Copier place l'ensemble dans le presse-papiers.
  4. Appuyez sur Effacer pour vider le champ et le résultat. Si vous appuyez sur un bouton de conversion avec un champ vide, la page affiche un rappel dans sa propre langue au lieu d'effacer le résultat précédent.
  5. Conservez le texte d'origine jusqu'à la vérification de la sortie : les niveaux de titre, les tableaux, les blocs de code et les listes sont réécrits par règle, et l'échappement n'est pas toujours visible à l'œil nu.

Ce que le convertisseur réécrit, supprime et échappe

Du HTML vers Markdown

Les titres h1 à h6 deviennent # à ######, les paragraphes sont séparés par une ligne vide, <strong> et <b> deviennent **, <em> et <i> deviennent _, <del> devient ~~, et un lien devient [texte](href) avec l'attribut title entre guillemets. Une image devient ![alt](src) avec son title ; une image sans src conserve son texte alternatif au lieu d'interrompre la conversion, et un lien sans href conserve son texte. Un <br> s'écrit comme un saut de ligne à deux espaces, un <hr> comme * * *.

Les listes gardent leur imbrication et leur puce : les tirets restent -, une liste ordonnée conserve ses numéros et son attribut start, et un élément à deux paragraphes s'écrit comme un élément espacé au lieu d'être aplati. Un bloc <pre><code> devient un bloc délimité ; la langue est lue dans une classe telle que language-js, lang-js ou brush: js, la délimitation s'allonge lorsque le code contient lui-même des accents graves, et un <code> en ligne devient une paire d'accents graves.

Les commentaires, <script>, <style>, <head>, <title>, <meta>, <noscript>, <iframe>, <svg> et les contrôles de formulaire comme <input>, <select>, <textarea> et <button> sont supprimés avec leur contenu, car ils n'ont pas de sens en Markdown. Les enveloppes <div> et <span> vides disparaissent aussi, le texte d'une balise inconnue ou non fermée est conservé, et un balisage mal formé ne déclenche plus l'erreur qui laissait la zone de résultat vide.

Du Markdown vers HTML

Dans l'autre sens, la page rend les titres, paragraphes, emphases, liens, images, citations, lignes horizontales et listes imbriquées en HTML. Un bloc délimité devient <pre><code> avec la langue en classe, un tableau GitHub devient une vraie <table> avec l'alignement appliqué, et un fragment de code en ligne devient <code>, si bien qu'un exemple comme <div> reste visible en texte au lieu de disparaître dans la page.

Le HTML écrit dans le Markdown est transmis tel quel (la page n'échappe ni ne supprime un <div> ou un <script> que vous avez écrit vous-même) et les liens par référence ([texte][1] avec [1]: url en dessous) sont résolus. Une liste à puces suivie d'une liste numérotée reste deux listes au lieu d'être fusionnée, ce qui préserve les numéros.

Tableaux, échappement et limites pratiques

Un <table> devient un tableau GitHub : la première ligne sert d'en-tête (à partir des <th>, ou des <td> lorsque le tableau n'a pas de ligne d'en-tête), l'alignement des colonnes vient de l'attribut align ou d'un style text-align, et une barre verticale dans une cellule est échappée par une barre oblique inverse. Un <br> dans une cellule s'écrit <br> pour que la ligne reste sur une seule ligne.

Le texte qui serait lu comme du Markdown est échappé en sortie : * _ [ ] et les accents graves reçoivent une barre oblique inverse, une ligne commençant par #, -, + ou un nombre suivi d'un point est échappée, et < devient &lt;. Les entités HTML sont décodées : &amp; arrive donc sous la forme &, tandis que &nbsp; reste une espace insécable. Les usages courants sont un fragment HTML à convertir en Markdown pour un README ou un dossier de documentation, et l'inverse lorsque le Markdown doit alimenter un CMS ou un site statique. Tout s'exécute sur votre appareil : un document très volumineux est donc limité par la mémoire du navigateur et non par un quota de téléversement ; au-delà de 50 000 caractères, la zone de résultat affiche du texte échappé sans coloration syntaxique.

Outils récents :