Convertisseur Markdown en HTML & Aperçu

Convertisseur Markdown en HTML & Aperçu

Convertissez du Markdown en code HTML propre et optimisé pour la production en temps réel. Tableaux GFM, coloration syntaxique, assainissement XSS et export complet.

Modèles prédéfinis
Variante Markdown:
Format d'export:
Éditeur Markdown source
Lignes: 31Mots: 125Caractères: 885Octets: 885
Temps d'analyse: 3ms

Turbopack Build Optimizer

Build Status License: MIT

A next-generation zero-config build toolkit for modern web applications.

Feature Matrix

| Capability | Classic Webpack | Turbopack Native |
| :— | :—: | :—: |
| Cold Start (10k modules) | 8.4s | 1.2s |
| HMR Update Latency | 320ms | 18ms |
| Memory Footprint | 640 MB | 180 MB |

Roadmap & Progress

  • Rust-powered AST parsing engine
  • WebAssembly parallel sourcemap bundler
  • Edge runtime hot-reload socket connection
  • Automated polyfill treeshaking
# Install Turbopack globally
npm install -g @toolsaa/turbopack-cli

# Run dev benchmark
turbopack dev –port 3000
Taille du code HTML: 3424 bytesCompilé avec succès: 100%
XSS neutralisé
Temps d'analyse3 ms
Filtrage et assainissement XSSAssainissement DOM strict (protection anti-XSS)
Format d'exportstandalone
Traitement 100 % local et instantané

Compilation et rendu HTML exécutés directement dans la mémoire de votre navigateur sans aucune latence.

Zéro téléversement et respect de la vie privée

Vos textes et données restent strictement confidentiels sans aucun transfert vers des serveurs tiers.

Export optimisé pour la production

Générez un code HTML sémantique, sécurisé contre les failles XSS et immédiatement exploitable dans vos projets.

Référence technique et guide d'architecture

Convertisseur Markdown en HTML & Aperçu — Guide de référence

Convertissez du Markdown en code HTML propre et prêt pour la production en temps réel. Support des tableaux GFM, coloration syntaxique, assainissement XSS, copie texte enrichi et export complet.

Convertisseur Markdown en HTML & Aperçu — Guide de référence — Architecture en mémoire côté client et flux de données
Convertisseur Markdown en HTML & Aperçu — Guide de référence — Architecture en mémoire côté client et flux de données

Paramètres clés et contrôles

Source Markdown brute (rawMarkdownSource)Chaîne (RFC 7763 text/markdown)

Flux d'entrée UTF-8 brut conforme à la grammaire CommonMark ou GitHub Flavored Markdown (GFM). L'analyseur lexical traite les caractères en temps linéaire déterministe O(n) avec analyse prospective bornée, isolant les métadonnées frontmatter, les structures de blocs et les balises inline au sein d'un Web Worker isolé.

Par défaut : Auto
Mode de dialecte Markdown (markdownDialectMode)Énumération [gfm | commonmark | minimal]

Définit les règles de l'analyseur lexical et la génération de l'AST : « gfm » applique les extensions GitHub Flavored Markdown (tableaux à barres verticales, texte barré, liens automatiques, cases à cocher) ; « commonmark » applique la spécification stricte CommonMark 0.31.2 ; « minimal » analyse les titres et citations standard en interdisant les extensions complexes.

Par défaut : gfm
Format d'exportation HTML cible (htmlExportMode)Énumération [fragment | standalone | email-inline]

Configure la sérialisation des nœuds DOM compilés : « fragment » produit des balises HTML sémantiques internes (<article>) ; « standalone » compile un document W3C HTML5 complet avec <!DOCTYPE html>, métadonnées et balises viewport ; « email-inline » convertit les règles CSS en attributs de style en ligne compatibles avec les moteurs de rendu d'e-mails selon la RFC 5322.

Par défaut : fragment
Politique d'assainissement XSS (xssSanitizationPolicy)Énumération [strict-sanitized | trusted-raw]

Applique un assainissement récursif de l'arborescence DOM/AST via DOMPurify et un bac à sable DOMParser natif. Autorise les schémas d'URI sûrs (http:, https:, mailto:), supprime les scripts exécutables, les balises iframes/objects et les attributs d'événements inline (onload, onerror, onclick) pour neutraliser les attaques XSS stockées et les violations CSP.

Par défaut : strict-sanitized
Génération des ancres de titre (headingAnchorPolicy)Énumération [kebab-slug | numeric-id | none]

Contrôle la génération déterministe des attributs id sur les balises de titre <h1> à <h6>. « kebab-slug » convertit le texte en identifiants alphanumériques ASCII minuscules avec tirets selon la norme RFC 3986 pour les ancres intra-document ; « numeric-id » attribue des identifiants numériques séquentiels.

Par défaut : kebab-slug
Sécurisation des liens externes (externalLinkPolicy)Booléen

Injecte automatiquement rel="noopener noreferrer" et target="_blank" sur les balises d'ancrage (<a>) dont le nom d'hôte diffère de window.location.hostname, neutralisant les attaques de reverse tab-nabbing exploitant l'objet window.opener.

Par défaut : true
Extraction du Frontmatter (frontmatterExtraction)Booléen

Isole et supprime les métadonnées d'en-tête délimitées par des triples tirets (---) ou des triples plus (+++) avant la compilation Markdown. Sérialise les paires clé-valeur YAML/TOML en objets de métadonnées tout en évitant toute fuite de syntaxe brute dans le corps HTML.

Par défaut : true
Typographie et ponctuation intelligentes (smartTypography)Booléen

Exécute des remplacements linéaires par expressions régulières pour convertir les guillemets droits en guillemets typographiques (&ldquo;/&rdquo;, &lsquo;/&rsquo;), les tirets doubles/triples en tirets cadratins/demi-cadratins (&ndash;/&mdash;) et les points consécutifs en points de suspension (&hellip;) sans altérer les blocs de code.

Par défaut : true

Conseils de pro et bonnes pratiques

La compilation des tableaux GFM exige une ligne de séparation d'en-tête explicite

Selon la spécification GitHub Flavored Markdown (GFM §4.10) et les extensions CommonMark, un tableau ASCII n'est converti en balise <table> sémantique que si une ligne de délimitation est placée directement sous la ligne d'en-tête. Cette ligne doit comporter au moins trois tirets par colonne (par exemple : « | :--- | :---: | ---: | »). Les deux-points définissent l'alignement : à gauche (:---), centré (:---:) ou à droite (---:). L'omission de cette ligne séparatrice, l'absence d'une ligne vide avant le tableau ou l'oubli d'échapper les barres verticales internes (\|) dans les cellules force le compilateur à abandonner l'analyse du tableau et à produire un simple paragraphe brut.

Prévention des failles XSS stockées via les liens et images Markdown non assainis

Par défaut, les spécifications Markdown autorisent l'insertion de code HTML brut et de protocoles d'URI arbitraires, ce qui expose à des vulnérabilités de Cross-Site Scripting (XSS) critiques. Les vecteurs d'attaque incluent des liens obfusqués de type [Payload](javascript:alert(document.domain)) ou des balises d'image avec des URI data: contenant du code SVG malveillant. Les applications web côté client ne doivent jamais injecter la sortie brute du compilateur dans innerHTML. Passez systématiquement l'arborescence compilée dans un assainisseur tel que DOMPurify ou l'API native HTML Sanitizer avec une liste blanche stricte de protocoles (http:, https:, mailto:) et le respect des directives CSP de niveau 3.

Préservation des sauts de ligne stricts : deux espaces ou barre oblique inversée

Conformément à la spécification CommonMark §6.7, un retour à la ligne simple dans un paragraphe est interprété comme un saut de ligne souple (« soft break ») et fusionné en une espace simple ASCII (0x20) dans le rendu HTML. Pour forcer un véritable saut de ligne (<br />), insérez au moins deux espaces consécutives en fin de ligne avant le retour chariot, ou terminez la ligne par une barre oblique inversée (\). Dans une chaîne de traitement automatisée, activer l'option breaks: true transforme automatiquement chaque retour à la ligne en balise <br />, un réglage indispensable pour les messageries, les visionneuses de logs ou les lettres d'information.

Pièges de portée CSS lors de l'intégration de fragments HTML dans des frameworks modernes

L'injection de fragments HTML non encapsulés dans des architectures modernes à base de composants (React, Next.js, Vue) provoque fréquemment des conflits de spécificité CSS : les règles globales de réinitialisation altèrent le balisage injecté ou les styles de tableaux perturbent la mise en page parente. Encapsulez toujours le code HTML compilé dans un conteneur dédié (ex. <article class="markdown-body">) avec des propriétés personnalisées CSS isolées, ou choisissez le mode d'exportation « Document HTML5 autonome », qui intègre une feuille de style réinitialisée conforme au module CSS Containment de niveau 2.

Pièges courants et dépannage

⚠️Les tableaux Markdown s'affichent en texte brut avec des barres verticales au lieu de balises <table>

Vérifiez que votre tableau comporte bien une ligne de délimitation d'en-tête valide contenant au moins trois tirets par colonne (ex. « | --- | --- | ») immédiatement sous les titres. Assurez-vous également qu'une ligne vide sépare le paragraphe précédent du tableau : les analyseurs CommonMark et GFM exigent une rupture de bloc pour réinitialiser la machine à états lexicale avant d'entamer l'interprétation du tableau.

⚠️Les balises HTML brutes telles que <div> ou <span> sont échappées en entités &lt;div&gt;

Ce comportement se produit lorsque la politique d'assainissement XSS est réglée sur un échappement strict ou lorsque l'option html: false est activée dans le compilateur. Pour interpréter les éléments HTML légitimes dans le Markdown, vérifiez que votre politique autorise les balises sûres tout en bloquant les scripts exécutables, et veillez à ce que vos balises HTML ne soient pas indentées de 4 espaces ou d'une tabulation, ce qui déclenche l'analyse en bloc de code préformaté.

⚠️Les blocs de code avec délimiteurs s'affichent en texte brut sans coloration syntaxique

Les compilateurs Markdown standard ne génèrent que la structure HTML sémantique (ex. <pre><code class="language-typescript">...</code></pre>) sans inclure de thèmes de couleurs CSS par défaut. Pour obtenir un surlignage visuel des lexèmes, incluez une feuille de style de coloration côté client (telle que Prism.js ou Highlight.js) dans le document hôte, ou basculez le mode d'exportation sur « Document HTML5 autonome » afin d'injecter directement les définitions de styles précompilées.

⚠️Le texte indenté sous un élément de liste se convertit accidentellement en bloc de code indépendant

Selon la règle CommonMark §4.4, une indentation de 4 espaces ou d'une tabulation par rapport au niveau de la puce indique à l'analyseur lexical de créer un bloc de code préformaté. Pour formater un paragraphe secondaire ou du contenu multi-lignes au sein du même élément <li>, indentez les lignes suivantes de 2 espaces exactement pour correspondre à la largeur du marqueur de liste, sans atteindre le seuil critique des 4 espaces.

Foire aux questions (FAQ)

Comment convertir du Markdown en HTML en JavaScript ?▼

Pour convertir du Markdown en HTML en JavaScript, analysez la chaîne source en un arbre de syntaxe abstraite (AST) puis sérialisez-la en HTML via une bibliothèque éprouvée comme marked ou markdown-it. En ES6+ : import { marked } from 'marked'; const rawHtml = marked.parse(markdownText, { gfm: true, breaks: true });. Nettoyez impérativement le HTML généré avec DOMPurify.sanitize(rawHtml) avant toute injection dans le DOM via innerHTML afin de neutraliser tout risque d'attaque XSS stockée.

CommonMark vs GitHub Flavored Markdown (GFM) : quelle est la différence ?▼

CommonMark est la spécification formelle et non ambiguë de la syntaxe Markdown, créée pour standardiser les règles d'analyse entre les différents moteurs. GitHub Flavored Markdown (GFM) est une extension officielle de CommonMark 0.29 qui ajoute des fonctionnalités orientées développement : tableaux délimités par des barres verticales (| col |), cases à cocher de listes de tâches (- [ ] / - [x]), reconnaissance automatique des URL, texte barré (~~texte~~) et blocs de code délimités avec identifiants de langage.

Comment créer des tableaux en Markdown convertibles en balises HTML <table> ?▼

Pour créer un tableau HTML valide à partir de Markdown, définissez une ligne d'en-tête séparée par des barres verticales (|), suivie impérativement d'une ligne de délimitation contenant au moins trois tirets par colonne. Par exemple : « | Paramètre | Défaut | » suivi de « | :--- | ---: | » puis des lignes de données « | Timeout | 5000ms | ». Les deux-points déterminent l'alignement : « :--- » pour aligner à gauche, « :---: » pour centrer et « ---: » pour aligner à droite. Le compilateur génère les balises sémantiques <table>, <thead>, <tbody>, <tr>, <th> et <td>.

Comment prévenir les attaques XSS lors de la conversion de Markdown en HTML ?▼

La protection contre les failles Cross-Site Scripting (XSS) lors de la conversion repose sur une stratégie de défense en profondeur. Premièrement, configurez votre moteur Markdown pour interdire le HTML brut non vérifié ou bloquer les protocoles d'URI dangereux. Deuxièmement, filtrez le balisage produit avec un assainisseur robuste comme DOMPurify ou l'API Sanitizer du W3C, qui élimine récursivement les balises de script (<script>), les inclusions d'objets, les attributs d'événements inline (onload, onerror) et les pseudo-protocoles suspects (javascript:, data:text/html).

Comment convertir du Markdown en document HTML autonome complet avec styles ?▼

Pour obtenir une page web autonome, intégrez le fragment HTML compilé au sein d'un modèle HTML5 valide comprenant <!DOCTYPE html>, la balise <html lang="fr">, un bloc <head> avec l'encodage charset="utf-8", la configuration du viewport et une feuille de style intégrée. Dans cet outil, sélectionnez l'option d'export « Document HTML5 autonome » pour télécharger un fichier prêt pour la production incluant une typographie responsive soignée inspirée de GitHub et le support des modes clair et sombre.

Pourquoi les retours à la ligne Markdown ne créent-ils pas de sauts de ligne en HTML ?▼

Dans la spécification standard CommonMark §6.7, un retour à la ligne isolé au sein d'un paragraphe est considéré comme un saut souple (« soft break ») et fusionné en une simple espace lors de la compilation, ce qui permet de reformater le code source sans altérer le flux textuel. Pour obtenir un véritable saut de ligne (<br />), terminez la ligne par deux espaces consécutives, placez une barre oblique inversée (\) avant le retour à la ligne ou activez l'option breaks: true dans les paramètres de votre compilateur Markdown.

Outils et utilitaires connexes

Tous les outils →
Parseur Cron & Testeur CrontabDéveloppement

Analysez vos expressions cron en horaires lisibles. Inspectez les prochaines exécutions multi-fuseaux horaires, validez la syntaxe crontab et projetez les dates d'exécution.

Ouvrir l'outil→
Générateur GraphQL vers TypeScriptDéveloppement

Convertissez vos schémas SDL et requêtes GraphQL en types, interfaces, énumérations et résolveurs TypeScript. Génération instantanée dans le navigateur, sans configuration ni transfert serveur.

Ouvrir l'outil→
Convertisseur HTML en Markdown (GFM)Développement

Convertissez du code HTML en Markdown GitHub Flavored (GFM) avec tableaux, blocs de code et nettoyage d'extraits web. Supprimez les styles inline et exportez des fichiers .md propres.

Ouvrir l'outil→
Comparateur de Texte & Diff CheckerDéveloppement

Comparez vos textes, codes et fichiers avec notre comparateur de diff instantané. Visualisez les écarts côte à côte ou en ligne au caractère près, ignorez les espaces et exportez vos patchs unifiés.

Ouvrir l'outil→
Générateur de Balises Canoniques & URLDéveloppement

Générez des balises rel=canonical et en-têtes HTTP valides. Supprimez les paramètres de suivi, normalisez les URL et éliminez le contenu dupliqué en SEO.

Ouvrir l'outil→
Convertisseur cURL en Fetch (JS & Node)Développement

Convertissez instantanément vos commandes cURL en syntaxe Fetch API. Analysez en-têtes HTTP, tokens d'authentification, cookies et payloads JSON en code JavaScript async/await moderne.

Ouvrir l'outil→