Éditeur Markdown
Qu'est-ce que Markdown ?
Markdown est un langage de balisage léger pour écrire du contenu structuré dans un texte brut lisible. Titres, listes, liens, images, citations, blocs de code et tableaux se notent avec des caractères simples puis se rendent en HTML ou d’autres formats. Un éditeur Markdown aide à comparer source et aperçu, repérer les erreurs de formatage et préparer plus vite README, documentation, articles, notes, bases de connaissance, changelogs et textes produit. Markdown reste volontairement simple, mais chaque plateforme prend en charge des extensions différentes comme GitHub-Flavored Markdown, frontmatter, listes de tâches ou Mermaid. Le rendu final doit donc être vérifié dans le système de publication.
Comment utiliser
Comment utiliser
- Entrez le texte Markdown dans l'éditeur de gauche
- Le panneau de droite affiche l'aperçu en temps réel
- Utilisez les boutons de la barre d'outils pour insérer la syntaxe courante
- La barre inférieure affiche le nombre de mots, de caractères et de lignes
- Le contenu est enregistré automatiquement dans le stockage local du navigateur
Fonctionnalités
Conseils d'édition
- Le rendu de l'aperçu peut varier d'une plateforme à l'autre ; vérifiez donc le rendu final dans le système cible lorsque vous utilisez des tableaux, du HTML ou des fonctionnalités Markdown étendues.
- L'enregistrement automatique est utile pendant la rédaction, mais conservez une copie séparée des notes importantes avant de vider les données du navigateur ou de changer d'appareil.
Cas d’utilisation
Principe technique
Le rendu Markdown comporte généralement trois étapes : un tokenizer découpe le texte en unités syntaxiques comme les titres, paragraphes, listes et blocs de code ; un analyseur transforme le flux de jetons en arbre de syntaxe abstraite (AST) selon les règles de grammaire ; un moteur de rendu parcourt l'AST et génère le HTML correspondant. Les bibliothèques JavaScript courantes incluent marked, markdown-it, remark et micromark — elles diffèrent par la taille du bundle, la vitesse et l'extensibilité, mais toutes suivent la spécification CommonMark. CommonMark a fixé les ambiguïtés de la grammaire Markdown originale (par exemple comment indenter les listes imbriquées, comment trouver la limite du code en ligne) de sorte que les différentes implémentations produisent le même rendu. Au-dessus de CommonMark, GitHub a ajouté le GFM (GitHub Flavored Markdown), qui ajoute les tableaux, les listes de tâches (- [ ]), le barré (~~), les liens automatiques et les blocs de code délimités ; le GFM est aujourd'hui le standard de fait, et la plupart des outils Markdown modernes l'activent par défaut. La coloration syntaxique des blocs de code est généralement réalisée par highlight.js ou Prism.js, qui reconnaissent le tag de langue au moment du rendu et marquent les mots-clés, chaînes et commentaires avec des classes CSS qu'un thème habille en couleur. Pour empêcher le HTML fourni par l'utilisateur de déclencher des XSS, les moteurs de rendu passent généralement la sortie au filtre DOMPurify ou un filtre à liste blanche similaire qui supprime les balises script, iframe et les attributs d'événement on* — ainsi coller le Markdown d'une autre personne ne peut pas exécuter de script malveillant.
- Flux d'analyse : le texte brut passe par Tokenizer -> Parser -> Renderer pour devenir du HTML, l'AST servant de représentation intermédiaire.
- Standards : CommonMark est la grammaire officielle ; GFM l'étend avec les tableaux, listes de tâches, barré, blocs de code délimités et liens automatiques.
- Comparaison de bibliothèques : marked est petit et rapide, markdown-it dispose d'un riche écosystème de plugins, et remark repose sur l'écosystème unified et convient aux pipelines de traitement de documents.
- Coloration syntaxique : highlight.js ou Prism.js lisent le tag de langue du bloc de code au moment de l'analyse et marquent les mots-clés, chaînes et commentaires avec des classes CSS.
- Protection XSS : des bibliothèques comme DOMPurify filtrent le HTML de sortie par une liste blanche, supprimant les balises script, iframe et les attributs d'événement on* pour empêcher l'injection de scripts.
- Prévisualisation en direct : l'éditeur écoute les événements de saisie, applique un debounce à chaque modification, ré-analyse et met à jour le DOM du panneau de droite via diff pour équilibrer réactivité et performance.
Exemples
Titres, listes et blocs de code
# Titre 1
## Titre 2
- Élément de liste A
- Élément de liste B
- Élément de liste imbriqué
```javascript
function hello() {
console.log('Hello Markdown');
}
```Tableaux
| Outil | Type | Taille |
|---------|--------|--------|
| Vite | Build | Petit |
| Webpack | Build | Grand |
| Rollup | Bundle | Moyen |Citations et liens
> « Markdown permet à l'écriture de revenir au contenu lui-même. »
> -- John Gruber
Référence : [CommonMark Spec](https://commonmark.org)FAQ
Quelle variante de Markdown est prise en charge ?
La plupart des versions utilisent CommonMark plus les extensions GitHub Flavored Markdown : tableaux, barré, listes de tâches, blocs de code délimités avec indication de langage. Certaines incluent MathJax/KaTeX pour les blocs $math$ et Mermaid pour les diagrammes. Vérifiez la barre d'outils pour voir ce qui est disponible.
Le document est-il envoyé sur un serveur ?
Non. L'analyse et le rendu Markdown se font dans votre navigateur via une bibliothèque JS (typiquement markdown-it ou remark). Votre brouillon ne quitte jamais l'appareil.
Comment fonctionne l'aperçu en direct ?
À mesure que vous tapez, le panneau source est analysé et rendu en HTML dans le panneau d'aperçu. Le défilement synchronisé maintient les deux panneaux alignés en faisant correspondre les positions des paragraphes. La plupart des versions prennent aussi en charge le plein écran et le mode côte à côte.
Puis-je exporter le document ?
Oui — téléchargez en .md (la source brute), HTML (rendu, prêt à intégrer dans une page web) ou PDF (imprimé via le moteur d'impression du navigateur). La sortie PDF préserve les titres, listes, blocs de code et images intégrées. Pour des PDF au pixel près, collez le HTML dans un véritable traitement de texte.
Mon brouillon est-il sauvegardé si je ferme l'onglet ?
La plupart des versions enregistrent automatiquement dans localStorage, donc rouvrir le même navigateur restaure le brouillon. Fermer une fenêtre privée ou effacer les données du site l'efface. Pour une vraie persistance, exportez périodiquement le fichier .md vers votre système de fichiers ou un dépôt git.
Les images collées sont-elles téléversées ?
Certains éditeurs stockent les images collées en base64 inline (visible dans la source markdown). D'autres les téléversent vers un hébergeur d'images — vérifiez le comportement de la page. Si la confidentialité importe, enregistrez d'abord les images sur votre système de fichiers et référencez-les par chemin relatif.
Puis-je insérer des tableaux, des formules ou des diagrammes ?
Les tableaux GitHub Flavored Markdown (| col1 | col2 |) fonctionnent partout. Les blocs mathématiques ($x^2$) et les diagrammes Mermaid (```mermaid) nécessitent une prise en charge explicite ; vérifiez la barre d'outils. Là où c'est pris en charge, l'aperçu les rend en direct.