Aller au contenu principal
Markdown

Aperçu Markdown en direct

Rédigez ou importez du Markdown à côté d'un aperçu assaini, suspendez le rendu pendant l'édition et copiez exactement le HTML autorisé sans scripts. Parfait pour itérer sur documentation, README ou articles avec feedback visuel immédiat. Mode live ou manuel, aperçu sécurisé.

Outils Markdown

En bref

L’éditeur partagé combine Marked et DOMPurify sur l’appareil ; scripts, formulaires, styles, images, SVG, embeds et liens dangereux n’atteignent jamais l’article rendu.

Fonctionnalités prises en charge

  • Associe un éditeur CodeMirror Markdown, un exemple réinitialisable et l’import d’un fichier texte local à un article rendu.
  • Utilise Marked avec GFM activé et breaks désactivé : tableaux et tâches sont reconnus, les retours simples restent souples.
  • Applique la politique DOMPurify restrictive qui retire balises actives, images, styles/srcset, attributs data et URI interdites.
  • Peut suspendre Live, reprendre avec Rendre l’aperçu, compter les lignes source et copier le HTML assaini plutôt que le Markdown.

Comment utiliser Aperçu Markdown en direct

Suivez ce flux propre à Aperçu Markdown en direct ; chaque étape correspond aux commandes et limites réelles de l’espace de travail dans le navigateur.

  1. 1

    Étape 1

    Fournir la source exacte

    Rédigez dans l’éditeur, importez un fichier texte ou chargez l’exemple documenté.

  2. 2

    Étape 2

    Choisir l’opération

    Laissez Live pour le retour immédiat ou coupez-le afin qu’une longue modification ne se rende pas à chaque frappe.

  3. 3

    Étape 3

    Configurer les options disponibles

    Appuyez sur Rendre l’aperçu pour reprendre le rendu assaini après une pause.

  4. 4

    Étape 4

    Exécuter l’opération locale

    Comparez hiérarchie, listes, citations, code, tableaux et liens avec le document prévu en notant les éléments supprimés.

  5. 5

    Étape 5

    Vérifier puis continuer

    Copiez le HTML seulement après revue, puis validez-le sous les règles Markdown, CSS et sécurité de la destination.

Erreurs fréquentes

Attendre un saut de ligne forcé après chaque retour simple

Conséquence: Le parseur utilise breaks:false ; un retour simple reste un saut souple sauf syntaxe Markdown explicite.

Correction: Employez une ligne vide pour un paragraphe ou la forme CommonMark prévue pour un saut forcé.

Croire le navigateur défaillant lorsqu’une image disparaît

Conséquence: Le sanitizer interdit volontairement img et les balises actives ou réseau.

Correction: Gardez l’aperçu centré sur le texte et ajoutez les ressources approuvées sous la politique CSP de la destination.

Copier avant de réactiver un aperçu suspendu

Conséquence: Lorsque Live est arrêté, htmlOutput reste vide jusqu’à ce que Rendre l’aperçu relance le calcul.

Correction: Relancez, inspectez le résultat courant, puis utilisez Copier.

Bonnes pratiques

  • Respectez une hiérarchie logique des titres et examinez-la avant publication.
  • Ajoutez un identifiant de langage aux blocs de code, tout en sachant que cette vue ne les colore pas.
  • Conservez le Markdown sous contrôle de version et considérez le HTML comme un artefact régénérable et réassainissable.

Flux de travail liés

Limites du navigateur

  • Pas de collaboration, autosauvegarde, moteur personnalisé, coloration, PDF ni images réseau.
  • Marked GFM peut différer de GitHub, d’un CMS ou de CommonMark strict aux limites des extensions et du HTML brut.
  • Les longs documents sont analysés et assainis sur le thread principal à chaque recalcul Live, ce qui peut retarder la frappe.

Ressources de référence

Spécification CommonMark 0.31.2Éditeur: CommonMark · Révisé: 2026-07-26Documentation et recommandations de sécurité de MarkedÉditeur: Projet Marked · Révisé: 2026-07-26Documentation de sécurité de DOMPurifyÉditeur: Cure53 · Révisé: 2026-07-26

Exemples concrets

Entrée
## État - [x] analysé - [ ] publié
Résultat
L’aperçu montre un titre niveau 2 et deux tâches ; la copie contient le HTML assaini émis par Marked.

GFM reconnaît les listes de tâches. DOMPurify conserve les cases générées non interactives et supprime le contenu actif interdit.

Questions fréquentes

L’aperçu exécute-t-il du HTML ou JavaScript écrit dans Markdown ?

Non. Le HTML brut passe par DOMPurify et script, style, form, iframe, SVG, embed et autres balises dangereuses sont interdits.

Pourquoi mon tableau fonctionne-t-il ici mais pas ailleurs ?

Ce parseur active GitHub Flavored Markdown ; une destination CommonMark stricte sans extension tableau peut différer.

Que copie exactement le bouton Copier ?

La chaîne HTML assainie actuellement rendue, ni le Markdown source ni le CSS visuel de l’application.

Puis-je prévisualiser des images distantes ?

Non. img est interdit afin d’empêcher requêtes d’images, fuite de referrer et trafic réseau.

Comment éviter le rerendu d’un long document pendant la frappe ?

Désactivez Live, terminez la modification puis utilisez une fois Rendre l’aperçu.

Confidentialité et fonctionnement hors ligne

Le brouillon et le HTML généré restent dans le navigateur sans envoi serveur. Lecture de fichier et copie suivent uniquement vos actions ; le moteur fonctionne hors ligne après cache.