Convertisseur Markdown vers HTML
Convertissez du Markdown en HTML dans le navigateur — GitHub Flavored Markdown complet, aperçu en direct, coloration syntaxique. Exportez un fragment, un document complet ou du HTML inline compatible e-mail. 100 % privé.
CSS personnalisé
Qu'est-ce que la conversion Markdown vers HTML ?
La conversion Markdown vers HTML transforme un document en texte brut écrit en Markdown — avec `#` pour les titres, `**gras**`, `- ` pour les listes et `[texte](url)` pour les liens — en le HTML que les navigateurs, les systèmes de gestion de contenu et les clients de messagerie affichent réellement. Le Markdown est conçu pour être lisible tel quel et facile à écrire, mais un navigateur ne comprend pas `# Titre` ; il comprend <h1>Titre</h1>. La conversion comble cet écart.
En coulisses, un processeur Markdown analyse d'abord votre source en un arbre syntaxique abstrait (AST) — une représentation structurée où un titre, un paragraphe, une liste et un bloc de code sont des nœuds distincts avec leur contenu et leurs attributs. Il sérialise ensuite cet arbre en HTML, émettant les bonnes balises et la bonne imbrication. Travailler à travers un AST, plutôt que de remplacer du texte avec des expressions régulières, est ce qui permet au convertisseur de gérer correctement et de façon prévisible les listes imbriquées, les tables et le HTML intégré. Les deux grammaires reconnues sont CommonMark, la norme précise, et GitHub Flavored Markdown (GFM), qui l'étend avec les tables, les listes de tâches, le texte barré et les liens automatiques.
La raison pour laquelle vous convertissez, c'est que presque toutes les destinations de publication veulent du HTML, pas du Markdown. Un générateur de site statique, un champ de texte enrichi de CMS, un modèle d'e-mail et un onglet de navigateur affichent tous du HTML. Le flux de travail typique est donc d'écrire dans un Markdown confortable — un README, de la documentation, un brouillon de blog, des notes — et de convertir en HTML au moment de la publication. Cet outil réalise cette conversion localement et affiche un aperçu en direct, de sorte que vous voyez le résultat rendu et pouvez copier le HTML exact dans la forme dont vous avez besoin : un fragment, une page complète ou du balisage inline prêt pour l'e-mail.
L'opération inverse — du HTML vers le Markdown — est tout aussi utile lorsque vous migrez du contenu web existant vers un système basé sur Markdown. Pour cela, basculez sur l'onglet HTML → Markdown ou ouvrez le convertisseur HTML vers Markdown dédié.
Markdown in:
# Release Notes
We shipped **tables** and `code`:
| Feature | Status |
| ------- | ------ |
| GFM | Done |
- [x] Parse to an AST
- [ ] Profit
HTML out:
<h1>Release Notes</h1>
<p>We shipped <strong>tables</strong> and <code>code</code>:</p>
<table>
<thead><tr><th>Feature</th><th>Status</th></tr></thead>
<tbody><tr><td>GFM</td><td>Done</td></tr></tbody>
</table>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" checked disabled> Parse to an AST</li>
<li class="task-list-item"><input type="checkbox" disabled> Profit</li>
</ul> Fonctionnalités clés
Aperçu en direct à volets fractionnés
Tapez du Markdown à gauche et regardez-le se rendre à droite en temps réel, avec la sortie HTML se construisant en dessous à mesure que vous avancez. L'aperçu se rend dans une iframe en bac à sable, donc ce que vous voyez est ce qu'un navigateur affichera — et les scripts collés ne peuvent pas s'exécuter.
GitHub Flavored Markdown complet
Pas seulement CommonMark — le surensemble GFM complet : tables à barres verticales, listes de tâches (`- [x]`), texte barré (`~~`), URL transformées en liens automatiquement et blocs de code délimités. Un README ou un ticket écrit pour GitHub s'affiche ici exactement comme là-bas.
Coloration syntaxique
Étiquetez un bloc de code délimité avec son langage (```js, ```python, ```sql) et le convertisseur le colorise, enveloppant les jetons dans des spans avec une classe de langage sur l'élément <code>. Associez-le à une feuille de style de coloration sur votre page pour la couleur.
Trois formats de sortie
Exportez un fragment HTML (balisage de corps pour un template ou un CMS), un document complet (une page autonome que vous pouvez enregistrer en .html), ou du HTML E-mail inline avec les styles déplacés sur chaque élément pour qu'Outlook et les autres clients le rendent correctement.
Panneau CSS personnalisé
Injectez votre propre CSS dans l'aperçu en direct pour reproduire la typographie d'un site ou imiter le style README de GitHub. Saisissez des règles comme h1 { color: #0969da; } et l'aperçu se met à jour instantanément, sans toucher au HTML propre que vous copiez.
Aide-mémoire de syntaxe GFM
Une référence rapide pour la syntaxe qui produit du HTML : `# H1` → titre, `**gras**` → <strong>, `*italique*` → <em>, `- item` → liste, `1. item` → liste ordonnée, `[texte](url)` → lien, `` `code` `` → code inline, ` ```lang ` → code délimité, `> citation` → bloc de citation, `| a | b |` → table, `- [ ]` → liste de tâches, `~~texte~~` → texte barré.
100 % privé, dans le navigateur
Chaque conversion s'exécute localement avec JavaScript — votre Markdown et votre HTML ne quittent jamais votre appareil, n'atteignent jamais un serveur et fonctionnent hors ligne après le chargement de la page. Sûr pour les docs non publiées, les README internes et les notes de version sous embargo.
Exemples
Table GFM vers un <table> HTML
| Outil | Vitesse | | ----- | ------- | | GFM | Rapide |
<table> <thead><tr><th>Outil</th><th>Vitesse</th></tr></thead> <tbody><tr><td>GFM</td><td>Rapide</td></tr></tbody> </table>
Les tables à barres verticales du GitHub Flavored Markdown ne font pas partie du CommonMark standard, mais ce convertisseur les comprend et émet un <table> sémantique correct avec <thead> et <tbody> — prêt à styler ou à déposer dans un CMS.
Liste de tâches vers HTML avec cases à cocher
- [x] Écrire le README - [ ] Le convertir en HTML
<ul class="contains-task-list"> <li class="task-list-item"><input type="checkbox" checked disabled> Écrire le README</li> <li class="task-list-item"><input type="checkbox" disabled> Le convertir en HTML</li> </ul>
La syntaxe de liste de tâches GFM `- [x]` / `- [ ]` devient de vraies cases à cocher désactivées, exactement comme GitHub affiche une liste de contrôle — ainsi un README copié a la même apparence sur votre propre page.
Bloc de code délimité vers <pre><code> coloré
```js const html = md.render(src) ```
<pre><code class="language-js"><span class="hljs-keyword">const</span> html = md.render(src) </code></pre>
Ajoutez un langage après les barres d'ouverture et le convertisseur applique la coloration syntaxique, enveloppant les jetons dans des spans avec une classe language-js sur l'élément <code>. Associez-le à une feuille de style de coloration et le code est colorisé.
Un README vers un document HTML complet
# Mon projet Une courte description et un [lien](https://example.com).
<!doctype html> <html lang="fr"> <head><meta charset="utf-8"><title>Mon projet</title></head> <body> <h1>Mon projet</h1> <p>Une courte description et un <a href="https://example.com">lien</a>.</p> </body> </html>
Basculez la sortie sur Document complet et le convertisseur enveloppe le HTML rendu dans une page complète avec un <head> et un charset — un fichier .html autonome que vous pouvez ouvrir dans n'importe quel navigateur ou télécharger directement.
Comment convertir du Markdown en HTML
- 1
Saisissez ou collez votre Markdown
Déposez votre Markdown — un README, des notes de version, un corps de ticket — dans le volet de saisie. Le GitHub Flavored Markdown complet est pris en charge : tables, listes de tâches, texte barré, liens automatiques et blocs de code délimités. L'aperçu en direct et la sortie HTML se mettent à jour pendant que vous tapez, le tout dans votre navigateur.
- 2
Choisissez un format de sortie
Choisissez Fragment HTML pour coller dans un template ou un CMS, Document complet pour une page .html autonome, ou E-mail inline pour du HTML aux styles inline qui survit à Outlook. Ajoutez des balises de langage aux blocs de code pour la coloration syntaxique, et utilisez le panneau CSS personnalisé pour styler l'aperçu.
- 3
Copiez ou téléchargez
Cliquez sur Copier pour récupérer le HTML, ou sur Télécharger pour l'enregistrer dans un fichier. Pour inverser la conversion, basculez sur l'onglet HTML → Markdown et collez votre HTML pour récupérer un Markdown propre.
Pièges courants
HTML non échappé avalé dans le texte
Le Markdown laisse passer le HTML brut, donc un chevron que vous vouliez comme texte — comme en écrivant à propos d'un <Component> ou d'un générique List<T> — est analysé comme une balise HTML et disparaît de la sortie. Échappez le chevron avec une barre oblique inverse ou une entité HTML, ou enveloppez le texte dans un span de code pour qu'il soit rendu littéralement.
Use the <Header> component to wrap pages. <!-- <Header> is parsed as a tag and vanishes -->
Use the `<Header>` component to wrap pages. <!-- backticks keep it literal: renders <Header> -->
Barres verticales de table mal alignées ou malformées
Une table GFM a besoin d'une ligne d'en-tête, d'une ligne de délimitation faite de tirets et d'au moins une barre verticale par ligne. Oublier la ligne de délimitation, ou avoir un nombre de colonnes différent de l'en-tête, casse la table — elle retombe en un simple paragraphe de barres verticales. Les cellules n'ont pas besoin d'être alignées visuellement, mais chaque ligne doit avoir le même nombre de colonnes.
| Name | Role | | Alice | Admin | <!-- no |---|---| delimiter row: not a table -->
| Name | Role | | ---- | ---- | | Alice | Admin | <!-- delimiter row present: renders a table -->
Bloc de code sans langage
Un bloc de code délimité sans chaîne d'information de langage se rend en bloc <pre><code> sans classe de langage, et n'obtient donc aucune coloration syntaxique. Le code apparaît quand même, juste en monochrome. Ajoutez le langage juste après les barres d'ouverture pour activer la coloration ; un espace entre les barres et le nom la désactive.
``` const x = 1 ``` <!-- no language → no highlighting -->
```js const x = 1 ``` <!-- language-js → highlighted -->
Utiliser un fragment là où un document complet est nécessaire
Copier la sortie de fragment HTML et l'enregistrer directement comme fichier .html produit une page sans doctype, sans charset et sans <html>/<head>/<body>. Les navigateurs la rendront souvent quand même, mais le mode quirks et l'absence de charset peuvent casser les caractères accentués et la mise en page. Quand le HTML doit être autonome, basculez sur le format Document complet.
<h1>Title</h1> <p>Saved as page.html — no doctype, no charset.</p>
<!doctype html> <html lang="en"><head><meta charset="utf-8"><title>Title</title></head> <body><h1>Title</h1><p>Complete, standalone page.</p></body></html>
Cas d'utilisation courants
- Publier dans un site statique ou un CMS
- Écrivez votre contenu en Markdown, convertissez-le en fragment HTML et collez-le dans un template de site statique ou un champ de texte enrichi de CMS. Vous obtenez un balisage sémantique propre — titres, listes, tables — sans que l'enveloppe de page ne gêne.
- Prévisualiser un README avant de pousser
- Collez votre README.md et regardez l'aperçu en direct le rendre avec le GFM complet — tables, listes de tâches, code délimité — pour repérer une table cassée ou une barre de code manquante avant le commit, pas après que GitHub l'ait montré au monde.
- Transformer des notes en page web partageable
- Des notes de réunion, un document de conception ou un brouillon écrit en Markdown deviennent une page HTML complète en un clic. Choisissez Document complet, téléchargez le fichier .html, et vous avez quelque chose que vous pouvez ouvrir dans n'importe quel navigateur ou héberger n'importe où.
- Construire du HTML inline compatible e-mail
- Les clients de messagerie suppriment les blocs <style>, alors écrivez votre message en Markdown et exportez le format E-mail inline, qui déplace le CSS sur chaque élément sous forme d'attribut style. Le résultat se rend correctement dans Outlook et les autres clients qui ignorent les styles au niveau du document.
- Convertir un fichier .md en .html téléchargeable
- Besoin d'une version HTML hors ligne et autonome d'un document Markdown ? Collez-le, choisissez Document complet et cliquez sur Télécharger — vous obtenez un fichier .html autonome avec un doctype et un charset corrects, sans outil de build ni ligne de commande.
- Intégrer des docs rendues dans une application
- Vous générez de la documentation, des changelogs ou du contenu d'aide à partir de Markdown stocké dans votre dépôt ? Utilisez cet outil pour voir exactement quel HTML une source Markdown donnée produit, afin de faire correspondre le moteur de rendu de votre application et de styler la sortie.
Détails techniques
- CommonMark vs GitHub Flavored Markdown
- CommonMark est la spécification Markdown stricte et sans ambiguïté qui définit exactement comment s'analysent les titres, l'emphase, les listes, les liens et les blocs de code. GitHub Flavored Markdown (GFM) est un surensemble strict : il conserve tout ce que CommonMark définit et ajoute quatre extensions — tables à barres verticales, éléments de liste de tâches (`- [x]`), texte barré (`~~texte~~`) et URL nues transformées en liens automatiquement. Comme le GFM ne fait qu'ajouter des fonctionnalités, tout document CommonMark valide est aussi un GFM valide. Ce convertisseur implémente le surensemble GFM, de sorte que les documents écrits pour l'une ou l'autre grammaire se rendent correctement.
- Rendu en bac à sable sûr contre le XSS
- Le Markdown autorise intentionnellement le HTML brut intégré, ce qui signifie qu'un document Markdown peut contenir une balise <script> ou un gestionnaire d'événement comme onerror. L'aperçu en direct se défend contre cela en se rendant dans une <iframe sandbox=""> avec le script désactivé, de sorte que le contenu actif de votre entrée ne peut pas s'exécuter pendant que vous le prévisualisez — important quand vous convertissez du Markdown provenant d'une source non fiable. Le HTML sérialisé produit par l'outil est le rendu fidèle de votre entrée ; si vous comptez publier du HTML dérivé de Markdown non fiable, passez-le par un assainisseur comme DOMPurify sur votre serveur avant de le servir.
- Compatibilité du HTML d'e-mail
- Le HTML d'e-mail est rendu par une mosaïque de moteurs au support CSS notoirement limité. Outlook sous Windows utilise le moteur de rendu de Word et ignore les blocs <style> dans l'en-tête du document, de sorte que tout style basé sur des classes disparaît silencieusement ; l'approche fiable, ce sont les attributs style inline sur chaque élément, ce que produit la sortie E-mail inline. Les images sont un autre piège : de nombreux clients bloquent les images distantes jusqu'à ce que le destinataire y consente, donc intégrer de petites images en URI de données les rend immédiatement, tandis que de grandes images distantes peuvent ne pas apparaître du tout. Gardez le balisage simple et testez sur vos clients cibles.
- Coloration synchrone dans le navigateur
- Quand un bloc de code délimité porte une chaîne d'information de langage (```js), le convertisseur exécute un coloriseur synchrone sur son contenu, découpant la source en jetons et enveloppant chaque jeton dans un <span> avec une classe comme hljs-keyword ou hljs-string, plus une classe language-js sur l'élément <code>. La coloration est purement structurelle — elle ajoute des classes, pas des couleurs — donc la page de destination a besoin d'une feuille de style de coloration correspondante pour rendre la palette. Comme elle s'exécute de façon synchrone dans le navigateur, le HTML coloré apparaît dès que vous tapez, sans appel réseau.
Bonnes pratiques
- Choisissez le format de sortie selon la destination
- Adaptez le format à l'endroit où va le HTML. Un champ de CMS ou un template possède déjà une enveloppe de page, alors collez un fragment HTML. Un fichier que vous voulez ouvrir directement dans un navigateur a besoin d'un document complet avec doctype et charset. Un e-mail a besoin d'E-mail inline pour que les styles survivent aux clients qui suppriment les blocs <style>. Coller la mauvaise forme est l'erreur évitable la plus courante.
- Étiquetez toujours les blocs de code avec un langage
- Écrivez le langage juste après les barres d'ouverture — ```js, ```python, ```sql — sans espace, pour que le convertisseur puisse coloriser le bloc et ajouter la bonne classe de langage. Une simple barre produit du code non stylé et non coloré. Utilisez un langage que le coloriseur reconnaît ; un nom inconnu ou mal orthographié retombe en texte brut.
- Assainissez avant de publier du Markdown non fiable
- L'aperçu est en bac à sable, mais le HTML que l'outil émet est un rendu fidèle — y compris tout HTML brut ou <script> dans l'entrée. Si ce Markdown provient d'utilisateurs ou d'une autre source non fiable et que vous comptez servir le résultat à d'autres personnes, passez d'abord le HTML par un assainisseur comme DOMPurify sur votre serveur. Le bac à sable vous protège pendant la conversion, pas vos visiteurs après la publication.
- Gardez le HTML d'e-mail simple et inline
- Pour l'e-mail, préférez le format E-mail inline, gardez votre mise en page simple et évitez les fonctionnalités CSS qu'Outlook et les autres clients abandonnent. Intégrez les petites images en URI de données pour qu'elles se rendent même quand les images distantes sont bloquées, et envoyez-vous toujours un test avant un envoi plus large — le rendu d'e-mail est la cible la moins indulgente du HTML.
- Échappez les caractères HTML littéraux dans le texte
- Si vous voulez qu'un < ou un & littéral apparaisse comme texte plutôt que d'être interprété comme une balise ou une entité, échappez-le avec une barre oblique inverse (\<) ou une entité HTML (<). Le Markdown laisse passer le HTML brut, donc un <exemple> non échappé dans du texte peut être avalé comme une balise inconnue et disparaître de la sortie rendue.
Questions fréquentes
Prend-il en charge le GitHub Flavored Markdown (GFM) ?
Comment obtenir du HTML inline compatible e-mail ?
Quelle est la différence entre un fragment HTML et un document complet ?
Le HTML rendu est-il sûr (XSS) pour l'aperçu ?
Puis-je ajouter mon propre CSS à l'aperçu ?
Mes fichiers ou mon texte sont-ils envoyés à un serveur ?
Fonctionne-t-il hors ligne ?
Comment convertir un fichier Markdown (.md) en fichier HTML ?
Pourquoi mon bloc de code n'est-il pas coloré ?
Puis-je reconvertir du HTML en Markdown ?
Outils connexes
Voir tous les outils →Décodeur et Encodeur Base64
Encodage et formatage
Décodez et encodez en Base64 en ligne gratuitement. Conversion en temps réel, support UTF-8 et émojis. 100 % privé, dans votre navigateur.
Convertisseur Base64 en Image
Encodage et formatage
Décodez une chaîne Base64 ou un URI de données en image dans votre navigateur. Aperçu, dimensions et MIME, puis téléchargement en PNG, JPG, GIF, SVG. Sans envoi.
Convertisseur CSV vers JSON
Encodage et formatage
Convertissez du CSV en JSON dans le navigateur. RFC 4180, inférence de types, ligne d'en-tête, sûr pour grands entiers. 100 % privé, sans envoi.
Convertisseur HTML vers Markdown
Encodage et formatage
Convertissez du HTML en Markdown propre dans le navigateur — tables GFM, listes de tâches, liens. Titres ATX/Setext et liens inline ou par référence. Idéal pour migrer du contenu web ou alimenter des LLM. 100 % privé.
Convertisseur d'Image en Base64
Encodage et formatage
Convertissez des images en URI de données Base64 dans votre navigateur — PNG, JPG, GIF, WebP, SVG, ICO. Copiez la sortie HTML, CSS, Markdown et JSON. 100 % privé.
JSON Diff (Comparateur)
Encodage et formatage
Comparez deux fichiers JSON instantanément dans votre navigateur. Vue côte à côte, sortie JSON Patch RFC 6902, ignorer les champs bruyants comme les horodatages et les ID. 100% privé, aucun envoi.