Convertisseur Markdown en HTML
Et du HTML vers Markdown, avec aperçu en direct

Ce que fait ce convertisseur Markdown en HTML

Ce convertisseur Markdown en HTML transforme le Markdown en texte brut en HTML prêt pour une page web. Tapez dans le champ Markdown et le HTML apparaît dans l’autre, tandis qu’un aperçu en dessous montre le rendu.

Il marche aussi dans la direction opposée. Collez du HTML tiré d’une page web, d’un CMS ou d’un e-mail, et vous obtenez un Markdown propre pour un README, un site statique ou une appli de notes.

Tout se passe dans votre navigateur, donc brouillons, notes privées et documents clients ne quittent jamais votre appareil. Par ailleurs, l’aperçu est sûr, car le convertisseur désactive tout script ou lien dangereux avant de vous montrer le résultat.

Qu’est-ce que Markdown ?

Markdown met un texte en forme avec de simples signes du clavier, comme l’astérisque ou le dièse. Un # ouvre un titre, les astérisques mettent le texte en gras ou en italique, et un tiret ouvre un élément de liste. Ainsi, le texte reste facile à lire avant même la conversion.

John Gruber l’a créé en 2004, et son histoire et ses variantes sont documentées en détail. Aujourd’hui, il fait tourner GitHub, Reddit, Slack, Notion, Jekyll, Hugo et d’innombrables sites de documentation.

Votre Markdown transformé en HTML

Tapez ou collez du Markdown dans le premier champ. Le HTML se met à jour pendant la saisie, avec titres, paragraphes, listes, liens, images, citations et blocs de code à leur place. Ensuite, copiez-le ou téléchargez-le en fichier .html.

Les blocs de code gardent leur langage, donc ```js devient un élément code avec la classe language-js. C’est justement ce que cherchent les coloriseurs syntaxiques comme Prism et highlight.js.

Votre HTML repassé en Markdown

Collez du HTML dans le second champ, et le Markdown apparaît dans le premier. Le convertisseur garde titres, gras et italique, liens, images, listes, citations, code et tableaux. En revanche, il écarte scripts, styles et cadres intégrés, qui n’ont pas leur place en Markdown.

Vous pouvez choisir un tiret ou un astérisque pour les éléments de liste, et des dièses ou un soulignement pour les titres principaux. Ainsi, le résultat suit le style que votre projet utilise déjà.

Tableaux GitHub, listes de tâches et plus

Avec les extras GitHub activés, le convertisseur comprend les fonctions que l’on utilise chaque jour sur GitHub. Autrement dit, des tableaux avec alignement des colonnes, des listes de tâches avec cases, du texte barré avec deux tildes et des adresses web nues qui deviennent des liens d’elles-mêmes.

Ces extras suivent GitHub Flavored Markdown, le dialecte que GitHub décrit dans son propre guide de syntaxe d’écriture et de mise en forme. En revanche, si vous voulez un Markdown strict et simple, désactivez-les.

Quelles règles Markdown il suit

Les règles de base viennent de la spécification CommonMark, la norme que partagent la plupart des outils modernes, que l’IETF a enregistrée avec les autres dialectes dans la RFC 7764. Cela couvre les cas courants : titres, emphase, liens, liens de référence, listes, listes imbriquées, citations et code. Toutefois, quelques cas rares de la spécification complète peuvent légèrement différer.

Collez n’importe quoi sans risque

Le Markdown peut contenir du HTML brut, et c’est ainsi que beaucoup de sites subissent des attaques. C’est pourquoi, par défaut, ce convertisseur affiche les balises HTML du Markdown comme du texte brut. Si vous faites confiance à la source, cochez Autoriser les balises HTML brutes, et le convertisseur garde les balises mais retire scripts, cadres et gestionnaires d’événements.

Dans tous les cas, le convertisseur vérifie chaque lien. Un lien vers javascript: ou un schéma similaire devient un # inoffensif, et le tableau des vérifications indique combien il en a modifié.

Des vérifications qui repèrent les erreurs courantes

Sous l’aperçu, un tableau de vérifications examine le résultat. Il avertit quand un niveau de titre manque, par exemple un H2 suivi d’un H4, ce qui déroute les lecteurs d’écran et les moteurs de recherche. De plus, il signale les images sans texte alternatif et les pages avec plus d’un H1.

Pour examiner en détail les titres d’une page en ligne, notre analyseur de balises de titre lit n’importe quelle URL et affiche son plan.

Rédiger un README en Markdown

Presque chaque projet sur GitHub commence par un fichier README.md. Donc, si votre documentation vit dans une vieille page HTML, collez-la dans le champ HTML, copiez le Markdown, et votre README est prêt en quelques secondes.

L’inverse marche aussi. Par exemple, quand un client veut le README sous forme de page web, convertissez le Markdown en HTML et placez-le dans n’importe quel modèle.

Markdown au cœur des générateurs de sites statiques

Jekyll, Hugo, Eleventy, Astro et Docusaurus construisent tous des sites à partir de fichiers Markdown. Par conséquent, migrer un ancien site vers l’un d’eux oblige souvent à convertir d’abord de nombreuses pages HTML en Markdown, et ce convertisseur s’en charge page par page.

Ensuite, avant de valider les fichiers, consultez le tableau des vérifications. Il signale les niveaux de titre sautés et les images sans texte alternatif, deux défauts qu’un site statique publierait tels quels.

Contenu venu de Word ou Google Docs

Copier depuis Word ou Google Docs entraîne souvent beaucoup de mise en forme cachée. D’abord, collez le texte dans votre CMS ou un brouillon d’e-mail, puis copiez le HTML et collez-le ici. Le convertisseur garde la structure, comme les titres, listes et liens, et laisse de côté polices et couleurs.

Ainsi, vous obtenez un Markdown propre, à stocker, modifier et réutiliser partout, sans le fouillis qu’ajoutent les outils bureautiques.

Écrire sans lâcher le clavier

Beaucoup d’auteurs préfèrent Markdown, car ils n’ont jamais besoin de la souris. Au lieu de cliquer sur une barre d’outils, vous tapez deux astérisques pour le gras ou un dièse pour un titre, et vous gardez le fil de vos idées. Plus tard, cette page transforme le brouillon en HTML en une seule étape. En même temps, les notes d’origine restent lisibles dans n’importe quel éditeur de texte brut, même dans des années.

Réussir ses tableaux

Un tableau demande deux choses : une ligne d’en-tête et, juste en dessous, une ligne de tirets entre barres verticales. Sans cette ligne de séparation, le convertisseur lit les lignes comme du texte brut, donc le tableau n’apparaît jamais.

Les autres lignes peuvent être irrégulières, car le convertisseur aligne les cellules pour vous. De plus, un deux-points de part ou d’autre des tirets fixe l’alignement de la colonne, et l’aperçu le montre aussitôt.

Enfin, gardez chaque tableau simple. Markdown ne sait pas fusionner des cellules, donc si une mise en page l’exige, laissez plutôt le tableau en HTML dans votre page.

Où les gens l’utilisent

Les rédacteurs écrivent en Markdown et collent le HTML dans un CMS qui ne gère pas Markdown. Les développeurs déplacent d’anciennes docs HTML vers un site Markdown. Par ailleurs, les équipes support transforment des pages d’aide en base de connaissances, et les étudiants nettoient des notes copiées sur le web.

Dans chaque cas, le fonctionnement dans les deux sens fait gagner du temps. Vous pouvez convertir, modifier le Markdown puis reconvertir, sans rien retaper.

Conseils pour un Markdown propre

Laissez une ligne vide entre les blocs, par exemple avant une liste ou après un titre. Indentez les éléments imbriqués de deux ou quatre espaces, et encadrez le code par trois accents graves au lieu de l’indenter. De plus, donnez à chaque image une courte description entre les crochets.

Une fois terminé, comptez les mots avec notre compteur de mots, ou vérifiez le titre et la description de la page avec l’aperçu d’extrait SERP.