§

Coller du Markdown

§

Brut

§

Aperçu

L'aperçu est assaini via DOMPurify — les balises script, gestionnaires d'événements et URIs javascript: sont supprimés avant le rendu.

Markdown s'est imposé comme la lingua franca de la documentation logicielle francophone. ETALAB et l'équipe api.gouv.fr publient leurs guides en Markdown généré via Hugo, OVHcloud maintient un blog d'ingénierie en Markdown frontmatter, Doctolib et BlaBlaCar publient leurs articles tech en Markdown depuis des CMS headless, et Mediapart utilise des workflows éditoriaux qui partent du Markdown vers HTML pour la publication. Les ministères français adoptent Jekyll et Hugo pour les sites institutionnels, tandis que OpenClassrooms, le CNAM et plusieurs universités diffusent leurs cours MOOC en Markdown rendu côté serveur. Le Monde alimente son CMS interne par des conversions Markdown vers HTML. Cet outil réalise la conversion localement et reste conforme au RGPD.

Qu'est-ce que la conversion Markdown vers HTML ?

Markdown est un format texte léger qui utilise une ponctuation minimale (# pour les titres, * pour l'emphase, - pour les éléments de liste) afin de coder une prose structurée. GitHub Flavored Markdown (GFM) étend la spécification CommonMark originale avec des tableaux, du texte barré, des listes de tâches et des autolinks. HTML est la forme rendue affichée par le navigateur. Convertir Markdown en HTML permet d'écrire dans la syntaxe légère et de publier vers une surface rendue — un README, une page de site statique, un corps d'e-mail — sans écrire les balises à la main.

Quelles fonctionnalités GitHub Flavored Markdown sont prises en charge ?

Le parser intégré marked@12.0.2 prend en charge le surensemble GFM complet : titres ATX de # à ######, listes ordonnées et non ordonnées avec imbrication, gras **texte** et italique *texte*, barré ~~texte~~, liens en ligne [texte](url) et images en ligne ![alt](src), blocs de code clôturés avec balise de langage optionnelle (```js), spans de code en ligne `code`, tableaux pipe avec ligne d'en-tête, listes de tâches GFM - [ ] / - [x], citations >, règles horizontales --- et autolinks. Chacun se rend dans le panneau d'aperçu de la même façon que GitHub le rend.

Comment fonctionne la conversion Markdown vers HTML ?

Chaque conversion s'exécute localement dans votre navigateur grâce à deux bibliothèques embarquées — pas de CDN, pas de fetch, pas de télémétrie. Les étapes principales sont :

  1. Analyser : marked.parse(source) lit votre Markdown et produit une chaîne HTML. Le parser s'exécute en mode GFM, de sorte que les tableaux, les listes de tâches, le texte barré et les autolinks sont tous reconnus.
  2. Assainir : la sortie HTML passe par DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) avant d'être assignée à innerHTML. DOMPurify est le même assainisseur XSS utilisé par Mozilla MDN, Atlassian et Microsoft 365 — il analyse le HTML, parcourt le DOM et supprime les éléments <script>, tous les attributs gestionnaires on* et les schémas URI javascript:.
  3. Rendre : le HTML assaini est écrit dans le panneau d'aperçu via innerHTML, et le HTML brut est exposé dans le second panneau via un <textarea> en lecture seule pour que vous puissiez copier le balisage. Le mode direct applique un debounce de 150 ms à la saisie pour que l'aperçu se mette à jour pendant la frappe sans saturer le parser.

Pourquoi convertir Markdown en HTML avec cet outil ?

  • Confidentialité : chaque passe d'analyse, d'assainissement et de rendu se déroule dans votre navigateur. Le Markdown — y compris les articles de blog non publiés, les brouillons de documentation interne et les contenus README confidentiels — n'atteint jamais nos serveurs.
  • Sûr face au XSS par défaut : le panneau d'aperçu rendu fait passer chaque chaîne HTML par DOMPurify avant innerHTML, donc une balise <script> ou un gestionnaire onerror= dans le HTML brut de votre Markdown produit un aperçu inerte. L'onglet brut affiche la sortie non assainie pour inspection, dans un <textarea> via value — jamais exécutée.
  • GFM complet : les tableaux, le barré, les listes de tâches et les autolinks se rendent comme GitHub les rend. Un tableau pipe Markdown devient un <table> HTML avec <thead> et <tbody> — pas de lignes perdues, pas de structure aplatie.

Quelles sont les applications courantes de la conversion Markdown vers HTML ?

Convertir Markdown en HTML revient dans la documentation, le travail avec des sites statiques et la rédaction d'e-mails :

  • Rédaction de README GitHub : rédiger un README de projet localement en Markdown et le prévisualiser avant de pousser. L'aperçu correspond au renderer GFM de GitHub pour les tableaux, les listes de tâches et le code clôturé.
  • Contenu pour site statique : coller un post Markdown et récupérer le HTML pour un champ de CMS ou un moteur de templates qui attend du balisage plutôt que la source Markdown.
  • Modèles d'e-mail : écrire le corps d'un e-mail transactionnel en Markdown et le convertir en HTML pour le moteur de templates du fournisseur d'e-mails. La sortie est du HTML sémantique simple — pas de styles en ligne, pas de bizarreries de client e-mail incrustées.

À quoi ressemble un exemple de conversion Markdown vers HTML ?

Coller # Titre\n\n- élément 1\n- élément 2\n\n[lien](https://example.com) produit un panneau d'aperçu contenant <h1>Titre</h1>, une liste non ordonnée à deux éléments et un <a href="https://example.com">lien</a>. L'onglet brut affiche la chaîne HTML exacte pour que vous puissiez la copier directement dans un template. Un tableau pipe avec une ligne d'alignement |---|---| devient un <table> complet avec <thead> et <tbody> — confirmant que les tableaux GFM se rendent comme GitHub les rend.

Ce convertisseur Markdown vers HTML s'exécute-t-il entièrement dans mon navigateur ?

Oui. Chaque passe d'analyse, d'assainissement et de rendu s'exécute localement en JavaScript dans votre onglet. Les bibliothèques embarquées — marked@12.0.2 et DOMPurify@3.1.7 — sont servies depuis la même origine que la page, donc pas de dépendance CDN, pas de fetch, pas de XMLHttpRequest, pas de navigator.sendBeacon sur l'entrée. L'outil fonctionne aussi hors ligne une fois la page chargée, car c'est un bundle statique HTML/CSS/JS avec les bibliothèques vendor copiées à côté. Les articles non publiés, les docs internes et les README confidentiels restent sur votre appareil.

Le panneau d'aperçu rendu est-il sûr face au XSS ?

Oui. Chaque chaîne HTML assignée à innerHTML passe d'abord par DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }). DOMPurify est l'assainisseur XSS open source maintenu par Cure53 ; c'est la même bibliothèque utilisée par Mozilla MDN, Atlassian et Microsoft 365 pour durcir le HTML fourni par l'utilisateur. Le profil html par défaut supprime les éléments <script>, tout attribut gestionnaire d'événement on* (onerror, onclick, etc.), les schémas URI javascript: dans href / src et les expressions CSS connues comme dangereuses. Coller <img src=x onerror=alert(1)> produit un aperçu où document.querySelector('#output-preview img[onerror]') renvoie null et aucune alerte n'est déclenchée.

Les tableaux GFM sont-ils pris en charge ?

Oui. La direction Markdown → HTML gère nativement les tableaux pipe via le mode GFM de marked — une ligne d'en-tête séparée par une ligne d'alignement |---|---|, suivie de lignes de données, produit une <table> avec <thead> + <tbody>. Le barré (~~texte~~<del>texte</del>) et les listes de tâches (- [ ] / - [x]<input type="checkbox">) se rendent de la même façon que GitHub.

Mon Markdown est-il converti fidèlement ?

Pour le jeu canonique de fonctionnalités GFM — titres h1 à h6, listes ordonnées et non ordonnées avec imbrication, gras / italique / barré, liens en ligne, images en ligne, blocs de code clôturés avec balises de langage, spans de code en ligne, tableaux pipe, listes de tâches, citations, règles horizontales et autolinks — la sortie HTML est stable et correspond au renderer de GitHub. Quelques comportements à noter : le HTML brut en ligne dans le Markdown (p. ex. <sub>texte</sub>) passe inchangé dans la sortie, et les titres setext de CommonMark (soulignés ===) et les titres ATX (# Titre) produisent tous deux le même <h1>. Ce sont des comportements documentés de marked, pas des bugs. Si vous avez besoin de la direction inverse, utilisez l'outil HTML vers Markdown.

La coloration syntaxique des blocs de code clôturés est-elle prise en charge ?

Pas en v1. Les blocs de code clôturés rendent avec une police monospace et un arrière-plan discret, mais sans coloration de tokens par langage. Ajouter la coloration syntaxique nécessiterait d'embarquer Prism ou highlight.js, chacun ajoutant 15–40 Ko plus un fichier de grammaire par langage et une matrice de thèmes qu'il faudrait aligner avec la palette Workshop Terminal. Pour l'instant, le renderer se concentre sur la correction et la sécurité XSS ; si la demande utilisateur pour la coloration en ligne se manifeste, un interrupteur opt-in est une suite envisageable.

Ce Convertisseur Markdown vers HTML embarque marked@12.0.2 et DOMPurify@3.1.7 servis depuis la même origine, prend en charge le jeu complet de fonctionnalités GFM, et assainit chaque chaîne HTML rendue avant qu'elle ne touche au DOM. Pas d'envoi, pas de CDN, pas de télémétrie — chaque octet reste dans votre navigateur.