MarkFlow : Un convertisseur Markdown ↔ HTML qui tient dans un seul fichier

 

Il y a quelques semaines, je me suis retrouvé à jongler entre des dizaines d'onglets pour convertir du Markdown en HTML, puis retour en Markdown, avec à chaque fois une nouvelle page web, une nouvelle extension, un nouvel outil en ligne qui nécessitait une connexion internet. Et je me suis dit : il doit y avoir une meilleure façon de faire ça.

Aujourd'hui, je suis heureux de partager MarkFlow, un convertisseur bidirectionnel Markdown ↔ HTML qui fonctionne entièrement dans votre navigateur, sans serveur, sans installation, et qui tient dans un seul fichier HTML.

🎯 La promesse

Téléchargez un fichier. Ouvrez-le. C'est tout.

Pas de npm install, pas de compilation, pas de serveur Node.js à lancer. Juste un fichier HTML de 1600 lignes qui contient tout : l'interface, la logique, les styles, et qui fonctionne même hors ligne.

Demo live : Essayez MarkFlow directement

💡 Pourquoi j'ai créé MarkFlow

En tant que développeur, je travaille quotidiennement avec du Markdown : README, documentation technique, notes personnelles, articles de blog. Mais il arrive régulièrement des situations où j'ai besoin de :

1. Convertir du Markdown en HTML pour l'intégrer dans une page web ou un email
2. Récupérer du Markdown à partir d'HTML (par exemple, pour éditer un ancien article dont je n'ai plus la source Markdown)
3. Prévisualiser mon Markdown avec du CSS personnalisé pour voir le rendu final avant publication
4. Faire tout ça rapidement, sans créer un compte, sans connexion internet, sans installer un outil lourd

Les outils existants faisaient une partie du job, mais aucun ne cochait toutes les cases. Alors j'ai décidé de construire exactement l'outil que je voulais utiliser.

✨ Ce qui rend MarkFlow différent

1. Conversion bidirectionnelle

La plupart des outils convertissent Markdown → HTML. MarkFlow fait les deux sens :

• Markdown → HTML avec support complet de GitHub Flavored Markdown (tables, task lists, strikethrough, code blocks)
• HTML → Markdown en préservant intelligemment la structure (tables, listes, formatage, balises <code class="language-*"> vers fenced blocks, etc.)

Un simple toggle en haut de l'interface bascule entre les deux modes, et le contenu sample s'adapte automatiquement.

2. Aperçu en temps réel avec CSS personnalisable

L'aperçu ne se contente pas d'afficher votre HTML. Vous pouvez :

• Ajouter votre propre CSS dans un onglet dédié
• Voir le rendu s'actualiser en temps réel (debounce de 250ms)
• Bénéficier d'une base typographique professionnelle que vous pouvez surcharger

Pratique pour tester comment votre Markdown va s'afficher sur votre blog avant publication.

3. Sécurité intégrée

Parce que convertir du HTML arbitraire peut être dangereux, MarkFlow intègre DOMPurify pour nettoyer tout le contenu avant de l'afficher dans la preview. Fini les risques d'injection XSS.

4. Zéro dépendance côté projet

L'architecture est volontairement minimaliste :

markflow/
├── markflow.html       # Tout est là-dedans
├── README.md
└── LICENSE

Les bibliothèques (Marked.js, Turndown, DOMPurify) sont chargées depuis des CDN. Aucun package.json, aucun node_modules, aucun bundler. Just open and use.

5. Persistance automatique

Votre travail est sauvegardé automatiquement dans le localStorage de votre navigateur :

• Le mode de conversion (MD→HTML ou HTML→MD)
• Votre contenu input
• Votre CSS personnalisé
• Toutes vos options

Fermez l'onglet, revenez demain : tout est encore là.