Convertir du HTML en Markdown

Ce que fait ce convertisseur

Le HTML est le langage des pages web. Le Markdown est une façon plus légère d’écrire la même structure avec des caractères simples : # pour un titre, - pour un élément de liste, ** pour le gras. On passe de l’un à l’autre tout le temps : déplacer un article de blog d’un CMS vers un site statique, coller une page web dans un README, ou transformer des notes écrites en Markdown en HTML pour un modèle d’e-mail.

Cette page fonctionne dans les deux sens. Pour convertir du HTML en Markdown, elle utilise Turndown, un convertisseur très répandu, avec des règles en plus pour les tableaux et les blocs de code. Pour le Markdown vers HTML, elle utilise marked avec le GitHub Flavored Markdown activé.

Mode d’emploi

1. Choisissez un sens avec HTML vers Markdown ou Markdown vers HTML.
2. Collez dans la zone de gauche, appuyez sur Ouvrir un fichier, ou sur Exemple pour essayer. Le résultat se met à jour pendant la frappe.
3. Pour HTML vers Markdown, choisissez le style des Titres (dièses ou soulignés), le caractère des Puces et l’écriture des Blocs de code (délimités ou indentés).
4. Pour Markdown vers HTML, activez Les retours à la ligne deviennent <br> si les sauts de ligne simples doivent rester des sauts, comme dans les commentaires GitHub.
5. Passez de Code à Aperçu pour voir le rendu, puis Copier ou Télécharger.

Exemple de HTML vers Markdown

Ce HTML :

<h1>Release notes</h1>
<p>Version <strong>2.4</strong> adds <a href="https://example.com/docs">offline mode</a> and fixes <em>three</em> bugs.</p>
<ul>
  <li>Faster search</li>
  <li>New <code>--quiet</code> flag</li>
</ul>
<pre><code class="language-bash">npm install [email protected]</code></pre>
<table>
  <tr><th>Platform</th><th>Status</th></tr>
  <tr><td>Windows</td><td>Ready</td></tr>
</table>

devient ce Markdown :

# Release notes

Version **2.4** adds [offline mode](https://example.com/docs) and fixes *three* bugs.

- Faster search
- New `--quiet` flag

```bash
npm install [email protected]
```

| Platform | Status |
| --- | --- |
| Windows | Ready |

La classe language-bash du bloc de code devient l’étiquette de langage après la clôture d’ouverture, donc la coloration syntaxique fonctionne toujours sur GitHub et dans la plupart des générateurs de sites statiques. Les listes imbriquées sont indentées sous leur élément parent, et une liste ordonnée garde ses numéros.

Exemple de Markdown vers HTML

Ce Markdown :

## Install

Run `npm install` and open **http://localhost:3000**.

- [x] Node 20
- [ ] Docker

donne ce HTML :

<h2>Install</h2>
<p>Run <code>npm install</code> and open <strong><a href="http://localhost:3000">http://localhost:3000</a></strong>.</p>
<ul>
<li><input checked="" disabled="" type="checkbox"> Node 20</li>
<li><input disabled="" type="checkbox"> Docker</li>
</ul>

Deux extensions GitHub sont à l’œuvre. L’URL seule est devenue un lien, et les éléments de la liste de tâches sont devenus des cases à cocher. Les tableaux avec :-: dans la ligne de séparation reçoivent align="center" sur leurs cellules.

Par défaut, un saut de ligne simple dans un paragraphe reste un simple saut dans la source, que les navigateurs affichent comme une espace. Avec Les retours à la ligne deviennent <br> activé, Ligne un et Ligne deux sur des lignes séparées deviennent <p>Ligne un<br>Ligne deux</p>.

Les textes en français passent sans changement : accents, guillemets « » et apostrophes restent tels quels dans les deux sens. Les entités HTML comme é sont décodées en vrais caractères dans le Markdown.

Ce qui disparaît

Le Markdown décrit la structure, pas la mise en page. En passant du HTML au Markdown :

• Les blocs script, style, noscript et template sont retirés.
• Les classes, identifiants, styles en ligne et attributs data disparaissent.
• Les éléments d’enveloppe comme div et span disparaissent, mais leur texte reste.
• Les cellules de tableau qui contiennent plusieurs paragraphes sont réunies sur une ligne, car une ligne de tableau Markdown doit tenir sur une ligne. Une barre verticale dans une cellule est échappée en \|.
• Les cellules fusionnées (colspan) sont complétées par des cellules vides pour que chaque ligne ait le même nombre de colonnes.

Si vous avez besoin d’une mise en page exacte, gardez le contenu en HTML. La plupart des moteurs Markdown acceptent des blocs de HTML brut.

Conseils

• Copiez depuis le code source de la page plutôt que depuis la page affichée quand c’est possible. Copier le texte affiché perd les balises dont le convertisseur a besoin.
• Si le HTML est minifié ou désordonné, le résultat est le même, car le convertisseur lit la structure, pas les espaces. Pour lire le HTML lui-même, passez-le d’abord dans le formateur HTML.
• Passez ensuite le Markdown dans le formateur Markdown pour des tableaux alignés et des emphases cohérentes.
• Pour un document Word, utilisez le convertisseur Word en Markdown, qui lit directement le fichier .docx.

Autres façons de convertir

• Pandoc convertit entre des dizaines de formats en ligne de commande. pandoc page.html -o page.md est la forme de base.
• Éditeurs : VS Code affiche un aperçu Markdown avec Ctrl+Maj+V. Plusieurs extensions ajoutent une commande de collage HTML vers Markdown.
• Code : la bibliothèque Turndown en JavaScript et le paquet markdownify en Python font la conversion HTML vers Markdown dans vos propres scripts.

Tout fonctionne dans votre navigateur. Le HTML collé est analysé comme un document inerte : rien de ce qu’il contient ne s’exécute ni ne se charge pendant la conversion.