Éditeur Markdown vers HTML

Écrivez du Markdown à gauche, obtenez le rendu et le HTML à droite.

Markdown

Rédigé et maintenu par l'équipe KitYards À propos de KitYards Dernière révision:

Un éditeur Markdown en deux panneaux avec aperçu en direct et export HTML propre. Écrivez à gauche : le panneau de droite se met à jour au fil de la frappe et bascule à tout moment entre le document rendu et le code HTML généré. Titres, gras et italique, liens, images, listes, listes de tâches, tableaux, citations, filets horizontaux et blocs de code sont pris en charge. Une fois terminé, copiez le HTML dans votre CMS ou téléchargez un fichier .html autonome.

Comment convertir du Markdown en HTML

  1. 1 Saisissez ou collez votre Markdown dans l’éditeur de gauche.
  2. 2 Regardez l’aperçu se rendre à droite pendant que vous écrivez.
  3. 3 Passez à l’onglet HTML pour inspecter le balisage généré et indenté.
  4. 4 Copiez le HTML ou téléchargez un document .html prêt à publier.

Comment la conversion fonctionne, et pourquoi elle est sûre

Le moteur de rendu est un petit sous-ensemble de CommonMark écrit de zéro : titres, emphase, code en ligne et en bloc, listes ordonnées et non ordonnées, citations, tableaux, liens, images et filets horizontaux. Embarquer une bibliothèque complète comme marked ou markdown-it coûterait plus de kilo-octets que tous les autres outils du site réunis, et ce sous-ensemble couvre ce que les gens écrivent réellement dans un README ou un article.

La conception sécurité mérite d’être dite clairement, car c’est le point que la plupart des convertisseurs Markdown ratent. Votre saisie est échappée en HTML avant toute analyse en ligne, et le HTML brut de la source n’est jamais transmis à la sortie. Un document Markdown contenant une balise script produit donc du texte visible et inoffensif, non un script qui s’exécute. Les URL de liens et d’images sont vérifiées contre une liste de protocoles incapables d’exécuter du code — http, https, mailto, tel, fragments, chemins relatifs et data URI limités aux images —, si bien que l’injection classique d’un lien javascript: n’a nulle part où aller.

L’aperçu en direct est rendu via innerHTML, ce qui n’est défendable qu’en raison de l’échappement ci-dessus. L’option « télécharger .html » enveloppe cette même sortie dans un document HTML complet avec un titre, pour que le fichier s’ouvre correctement dans un navigateur et non comme un fragment.

À quoi il sert

Coller dans un CMS

Beaucoup de systèmes de contenu acceptent le HTML mais pas le Markdown. Rédiger en Markdown puis convertir à la fin va plus vite que de lutter contre un éditeur visuel qui reformate au fil de la frappe.

Prévisualiser un README

Vérifier le rendu d’un README avant de le pousser évite le commit qui ne corrige qu’un tableau cassé. L’aperçu montre la structure telle qu’un moteur de rendu l’affichera.

E-mails et infolettres

Rédigez en Markdown, convertissez en HTML, collez dans l’outil d’infolettre. Le résultat est un balisage sémantique propre plutôt que la soupe de div imbriquées d’un éditeur de texte enrichi.

Apprendre le Markdown

Taper d’un côté et regarder la sortie de l’autre enseigne la syntaxe plus vite que n’importe quel tableau de référence, surtout pour les listes et les tableaux où l’indentation compte.

Pourquoi un éditeur Markdown dans le navigateur

Markdown est la façon la plus rapide d’écrire du texte structuré — README, documentation, brouillons d’articles, notes de version — mais la publication réclame généralement du HTML. Cet éditeur relie les deux sans étape de build, sans compte et sans coller votre texte sur le serveur d’un tiers. Le moteur échappe votre saisie avant de l’analyser : l’aperçu reste sûr même si votre texte contient des balises, et le HTML produit est du balisage sémantique simple, sans classes de framework ni traceurs.

Ce que ce moteur ne prend pas en charge

Il s’agit d’un sous-ensemble assumé, pas d’une implémentation complète de CommonMark. Les manques sont :

  • Le HTML brut n’est pas transmis. Intégrer une vidéo en iframe ou un widget en écrivant du HTML dans votre Markdown affichera les balises sous forme de texte — c’est une décision de sécurité, pas un oubli.
  • Aucune extension GitHub au-delà des tableaux : listes de tâches, texte barré, notes de bas de page et coloration syntaxique dans les blocs de code ne sont pas implémentés.
  • Pas d’analyse du front matter. Un bloc YAML en tête de document est rendu comme contenu au lieu d’être traité comme des métadonnées.
  • Les structures de listes très imbriquées ou inhabituelles peuvent différer d’un analyseur complet. L’imbrication simple fonctionne ; tous les cas limites de la spécification CommonMark ne sont pas couverts.
  • Les data URI non-images sont refusés dans les liens. Seuls les data:image passent, les data URI arbitraires étant un vecteur d’injection.

Dépannage

Mes balises HTML apparaissent comme du texte
C’est le comportement voulu. Le HTML brut est échappé plutôt que transmis : un document contenant du balisage affiche ce balisage. S’il vous faut du HTML en sortie, convertissez le Markdown ici puis ajoutez le HTML à la main dans le résultat.
Ma liste ne s’imbrique pas
L’imbrication en Markdown dépend de l’indentation, et la quantité requise dépend du marqueur parent. Indentez l’élément enfant d’au moins deux espaces ; quatre est le plus sûr et fonctionne partout. Une tabulation peut être interprétée différemment selon sa largeur.
Mon tableau ne s’affiche pas
Un tableau exige la ligne de séparation en tirets juste sous l’en-tête, avec au moins trois tirets par colonne, et le même nombre de cellules séparées par des barres verticales dans chaque ligne. L’absence de ligne de séparation est la cause habituelle ; une ligne à laquelle il manque une cellule vient ensuite.

Questions fréquentes

Quelle syntaxe Markdown est prise en charge ?

Titres, gras, italique, barré, code en ligne, blocs de code, liens, images, listes ordonnées et non ordonnées, listes de tâches, tableaux, citations et filets horizontaux.

Le HTML généré est-il propre ?

Oui : du HTML sémantique simple et indenté, sans styles en ligne ni classes propres à un framework, prêt à être collé dans n’importe quel CMS ou gabarit.

Mon brouillon est-il enregistré quelque part ?

Non. Le texte ne vit que dans la page tant qu’elle est ouverte. Rien n’est envoyé ni conservé à la fermeture de l’onglet.

La sortie est-elle sûre à publier ?

Le HTML produit par cet outil ne peut pas contenir de script, puisque la saisie est échappée avant analyse et que les protocoles d’URL dangereux sont filtrés. Cela dit, traitez tout contenu que vous n’avez pas écrit vous-même avec la prudence habituelle : la garantie porte sur ce que ce moteur émet, pas sur ce que vous collez ensuite.

Les tableaux sont-ils gérés ?

Oui. Utilisez la syntaxe à barres verticales avec une ligne de tirets sous l’en-tête. L’alignement des colonnes par deux-points dans la ligne de séparation est l’extension courante et se comporte comme attendu.

Puis-je reconvertir du HTML en Markdown ?

Pas avec cet outil : il convertit dans un seul sens. L’opération inverse est un problème réellement plus difficile, le HTML quelconque n’ayant pas d’équivalent propre en Markdown — le résultat demande toujours une reprise manuelle.

Mon document est-il envoyé quelque part ?

Non. Le moteur est un module JavaScript exécuté dans votre onglet, sans accès réseau. Brouillons, documentation interne et textes non publiés restent entièrement sur votre appareil.

Autres outils recommandés