Convertir du HTML en Markdown propre

Comment convertir du HTML en Markdown

1. Ajoutez votre HTML. Collez du code dans la zone, ouvrez un fichier .html local, ou copiez une partie de n’importe quelle page web et collez-la : avec le collage enrichi, le convertisseur prend le HTML mis en forme du presse-papiers plutôt que le texte brut.
2. Indiquez une URL de base si les liens sont relatifs. Le code copié depuis le source d’une page contient souvent des liens comme /docs/installation. Saisissez l’adresse de la page et chaque lien et chaque image relatifs deviennent absolus.
3. Choisissez votre style Markdown. Les valeurs par défaut (titres ATX, puces en tiret, code clôturé, liens en ligne, GFM activé) conviennent à GitHub, GitLab, Obsidian, à la plupart des générateurs de sites statiques et aux outils d’IA.
4. Copiez ou téléchargez. Le résultat se met à jour pendant la saisie. Copiez-le dans le presse-papiers ou enregistrez-le dans un fichier .md nommé d’après le premier titre.

Ce qui est converti, élément par élément

Le Markdown a un vocabulaire bien plus réduit que le HTML : le vrai travail d’un convertisseur consiste à décider en quoi se transforme chaque élément. Voici ce que produit l’outil :

• Titres : <h1>–<h6> deviennent # à ######. Le style Setext ne souligne que H1 et H2, car la syntaxe n’en prévoit pas davantage ; H3 et les niveaux suivants utilisent toujours #.
• Gras et italique (<strong>, <b>, <em>, <i>) utilisent les délimiteurs que vous choisissez.
• Liens : ils deviennent [texte](url "titre"), ou des références numérotées regroupées à la fin du document si vous choisissez les liens par référence. Les liens qui exécutent des scripts (javascript:) ou portent des données data: sont réduits à leur texte.
• Images : elles deviennent ![texte alternatif](src). Les images à chargement différé qui gardent la vraie adresse dans data-src sont reprises aussi. Les images data: intégrées sont supprimées, car un bloc base64 rend un fichier Markdown illisible.
• Listes : y compris celles imbriquées sur plusieurs niveaux, elles sont indentées sous leur élément parent. Les listes numérotées gardent leur numéro de départ (start) : une liste qui commence à 4 commence toujours à 4.
• Citations : elles deviennent des lignes >, citations imbriquées comprises.
• Code : <code> en ligne devient des accents graves ; les blocs <pre> deviennent des blocs clôturés, avec le langage quand il est déclaré (voir plus bas).
• Tableaux : ils deviennent des tableaux GFM à barres verticales. Les détails et les limites sont dans la section suivante.
• Texte barré et listes de tâches : <del>, <s> et <strike> deviennent ~~texte~~ ; les éléments de liste qui commencent par une case à cocher deviennent - [ ] ou - [x].
• Supprimés entièrement : <script>, <style>, <noscript>, <template>, les iframes, les objets intégrés, le SVG et le canvas. Les conteneurs de mise en page comme <div> et <span> sont dissous et seul leur texte est conservé, ce qui rend le Markdown plus compact et plus lisible que le HTML d’origine.

Tableaux : ce que le Markdown peut contenir, et ce qu’il ne peut pas

La spécification du Markdown GitHub (en anglais) définit un tableau comme une ligne d’en-tête, une ligne de séparation en tirets et des lignes de corps. Trois règles de la spécification déterminent la conversion des tableaux HTML :

• Une ligne d’en-tête est obligatoire. De nombreux tableaux HTML, surtout ceux collés depuis un tableur ou d’anciennes pages de CMS, n’ont aucune cellule <th>. Laissés tels quels, ils ne peuvent pas devenir des tableaux à barres verticales : par défaut, le convertisseur fait donc de la première ligne l’en-tête. Décochez l’option si vous préférez garder ces tableaux en HTML.
• Un contenu de type bloc ne peut pas vivre dans une cellule. La spécification précise qu’aucun élément de niveau bloc ne peut être inséré dans un tableau : les paragraphes et les sauts de ligne d’une cellule sont donc aplatis sur une seule ligne. Les listes à l’intérieur des cellules perdent leur structure ; si un tableau contient du contenu riche, envisagez de le garder en HTML.
• Une barre verticale littérale doit être échappée. Un | dans une cellule ouvrirait une nouvelle colonne : le convertisseur l’écrit donc \|, ce que la spécification autorise partout dans une cellule, y compris dans les extraits de code.

Les cellules fusionnées sont prises en charge en partie : une cellule avec colspan="3" est suivie de deux cellules vides pour que les colonnes restent alignées. Les fusions de lignes n’ont pas d’équivalent en Markdown et ne sont pas reproduites. Une balise <caption> est déplacée au-dessus du tableau comme paragraphe à part entière, et l’alignement des colonnes défini par les attributs align devient :--, :-: ou --: dans la ligne de séparation.

Blocs de code et coloration syntaxique

Les blocs de code clôturés peuvent porter une chaîne d’information après la clôture ouvrante, comme ```python, que les moteurs de rendu utilisent pour colorer le code. Le convertisseur cherche le langage aux endroits où les outils de coloration le placent : classes language-* et lang-* (Prism, highlight.js et la plupart des moteurs Markdown), conteneur highlight-source-* de GitHub, et attributs data-lang ou data-language. Un <pre> sans élément <code> interne reste traité comme un bloc de code et non comme de la prose échappée.

Le texte du code est repris tel quel : le balisage des outils de coloration (tous ces éléments <span> colorés) disparaît sans toucher au code. Si le code contient lui-même une suite de trois accents graves, la clôture est allongée au-delà de cette suite, car la spécification exige que la clôture fermante soit au moins aussi longue que l’ouvrante ; la documentation Markdown qui parle de Markdown reste ainsi intacte.

Les options expliquées

Titres ATX ou Setext

Les titres ATX (# Titre) fonctionnent pour les six niveaux et sont ce qu’attendent presque tous les outils. Les titres Setext soulignent le texte avec === ou --- ; certains guides de style les préfèrent pour H1 et H2, mais ils ne peuvent pas exprimer H3 et les niveaux suivants.

Liens en ligne ou par référence

Les liens en ligne gardent chaque URL à côté de son texte, ce qui convient aux documents courts et aux requêtes d’IA. Les liens par référence déplacent les URL dans une liste numérotée en bas de page, ce qui garde les longs paragraphes lisibles dans un éditeur de texte brut et se rencontre souvent dans les dépôts de documentation.

Échappement des caractères Markdown

Un texte comme 2024. Une bonne année ou nom_de_fichier_ici serait mal interprété comme une liste ou de l’italique : le convertisseur échappe donc ces caractères avec des barres obliques inverses. C’est la bonne option pour tout ce qui sera affiché par un moteur de rendu. Quand le résultat part dans une conversation avec une IA, un index de recherche ou une note en texte brut, décochez l’échappement pour obtenir un texte plus net.

URL de base

Les URL relatives n’ont de sens que sur la page d’où elles viennent. Avec une URL de base, ../images/graphique.png sur https://example.com/blog/article devient https://example.com/images/graphique.png, résolu avec les mêmes règles que celles des navigateurs.

Convertir une page web entière

Ce convertisseur ne récupère pas d’URL. Une page dans votre navigateur ne peut pas lire le HTML d’un autre site, sauf si celui-ci l’autorise, et beaucoup de pages modernes assemblent leur contenu en JavaScript après le chargement : une récupération côté serveur renverrait souvent une coquille vide. Copier depuis la page affichée évite les deux problèmes : sélectionnez l’article, copiez, collez ici. Vous obtenez le texte que vous voyez réellement, avec liens et mise en forme, sans la navigation, les bandeaux de cookies ni les publicités que vous n’avez pas sélectionnés. Pour extraire plutôt tous les liens d’une page, utilisez l’extracteur de liens.

Problèmes courants et solutions

• Un tableau apparaît en HTML dans le résultat. GFM est désactivé, ou la promotion de l’en-tête est désactivée et le tableau n’a pas de ligne d’en-tête. Réactivez l’une ou l’autre option.
• Les liens pointent au mauvais endroit. Ils étaient relatifs. Ajoutez l’adresse de la page comme URL de base.
• Les sauts de ligne semblent bizarres. Un <br> devient deux espaces en fin de ligne puis un retour à la ligne, le saut de ligne forcé de CommonMark. Certains éditeurs suppriment les espaces de fin de ligne à l’enregistrement, ce qui le retransforme en saut simple.
• Du texte manque. Si le HTML provient de « Afficher le code source » d’un site très dépendant de JavaScript, le contenu peut ne pas figurer du tout dans le balisage. Copiez plutôt depuis la page affichée.
• Tout tient en un seul paragraphe. La source utilisait des éléments <div> au lieu de <p> pour les paragraphes. Le Markdown ne connaît que les éléments sémantiques : une page construite avec des div stylés se convertit donc en simples blocs de texte.

Pourquoi convertir du HTML en Markdown ?

Le Markdown conserve ce qui porte du sens (titres, emphase, liens, listes, tableaux, citations et code) et abandonne le balisage de mise en page et les styles en ligne. Il est donc plus facile à modifier, à relire dans un gestionnaire de versions, à déplacer vers une base de connaissances comme Obsidian ou un site de documentation, ou à confier à une IA sans gaspiller son contexte sur des attributs class. Les développeurs s’en servent pour migrer le contenu d’un CMS vers un site statique ; les rédacteurs, pour déplacer des brouillons d’un éditeur à l’autre ; les chercheurs, pour garder des copies propres de leurs sources. Si vous collectez des sources plutôt que de les convertir, Marqly peut organiser vos liens de recherche dans une seule bibliothèque où tout se retrouve, et la page consacrée aux développeurs montre comment les documentations et extraits enregistrés restent faciles à retrouver.

Privé par conception

Le convertisseur repose sur la bibliothèque open source Turndown et son extension Markdown GitHub, auxquelles s’ajoutent la gestion des tableaux, du code et des liens propre à cette page, le tout intégré à la page. Il fonctionne hors ligne une fois chargé, et le texte collé, les fichiers et les réglages restent sur votre appareil. Pour une vérification rapide de la taille avant ou après la conversion, le calculateur de temps de lecture compte aussi les mots et les caractères en local.