Éditeur Markdown — Écriture et aperçu en direct
Éditeur Markdown avec aperçu en direct, coloration syntaxique et export HTML. Rédigez documentation et READMEs dans votre navigateur sans inscription ni installation.
Qu'est-ce que l'éditeur Markdown ?
L'éditeur Markdown est un environnement de rédaction en ligne gratuit qui affiche un aperçu en direct de votre Markdown au fur et à mesure que vous écrivez. L'éditeur et l'aperçu sont côte à côte : écrivez à gauche, voyez le rendu formaté à droite — instantanément, sans rechargement de page. Il prend en charge tout, des titres et du texte en gras aux blocs de code délimités, tableaux et citations.
L'outil est conçu pour les développeurs qui rédigent des READMEs, de la documentation technique, des ébauches de blog et des notes de version — partout où Markdown est le format d'édition. Plutôt que de pousser des modifications vers un dépôt et d'attendre un rendu d'aperçu, ou d'installer un plugin d'éditeur local, vous obtenez un aperçu précis rendu dans le navigateur. Une fois terminé, exportez le fichier en tant que fichier .md pour le contrôle de version ou en tant que fichier .html complet et stylisé prêt pour une page web. Aucun compte, aucun téléchargement serveur, aucune configuration.
Fonctionnalités clés
- Aperçu Markdown en direct — Propulsé par
@uiw/react-md-editor, l'éditeur rend l'aperçu en temps réel en utilisant la même analyse Markdown que celle fournie par la bibliothèque. Les modifications apparaissent dans l'aperçu dès que vous arrêtez de saisir un caractère. - Coloration syntaxique — Les blocs de code délimités (
javascript,python, etc.) sont rendus avec une sortie colorée syntaxiquement dans le panneau d'aperçu. La vue Markdown brute de l'éditeur applique également la coloration syntaxique pour différencier les titres, les liens, le gras et les spans de code. - Export vers HTML — « Télécharger HTML » produit un document
<!DOCTYPE html>complet avec des styles CSS intégrés couvrant la police du corps, les blocs de code, les citations et les tableaux. Le fichier est téléchargé sous le nomdocument.htmlet s'ouvre correctement dans n'importe quel navigateur sans dépendances externes. - Télécharger en tant que fichier .md — « Télécharger MD » sauvegarde le code source Markdown brut sous le nom
document.md, prêt à être soumis à un dépôt ou joint à un ticket. - Copier Markdown — Copie le texte Markdown brut dans le presse-papiers pour le coller dans GitHub, GitLab, Confluence, Notion ou tout champ acceptant Markdown.
- Copier HTML — Copie le HTML interne rendu depuis le panneau d'aperçu. Utile lorsque vous devez coller du contenu formaté dans un éditeur de texte enrichi qui accepte HTML.
- Barre d'outils de mise en forme — La barre d'outils
@uiw/react-md-editorfournit des boutons pour le gras, l'italique, les titres, les listes, les liens, les images, le code et plus encore. Aucune mémorisation de raccourcis clavier requise. - Panneau de référence rapide — Une aide-mémoire syntaxique sous l'éditeur couvre les neuf constructions Markdown les plus utilisées : titres, gras, italique, liens, images, code en ligne, listes, citations et blocs de code délimités.
Comment utiliser l'éditeur Markdown
Étape 1 : Commencer à écrire ou charger votre contenu
Lorsque la page se charge, l'éditeur contient un document d'exemple démontrant les titres, le texte en gras et en italique, une liste non ordonnée, un bloc de code JavaScript délimité, un tableau, une citation et un lien. Le panneau d'aperçu à droite affiche le rendu de cet exemple.
Effacez l'éditeur en cliquant sur le bouton « Effacer » dans la barre d'actions, ou sélectionnez simplement tout et commencez à taper. La hauteur de l'éditeur est fixée à 600px avec défilement vertical activé pour les documents plus longs.
Étape 2 : Écrire Markdown en utilisant la barre d'outils ou le clavier
La barre d'outils en haut de l'éditeur inclut des boutons pour les opérations de mise en forme les plus courantes. Cliquez sur G pour envelopper le texte sélectionné dans doubles astérisques pour le gras, ou cliquez sur I pour l'envelopper dans astérisques simples pour l'italique. Les boutons de titre insèrent des préfixes #, ## ou ###. Les boutons de bloc de code insèrent un bloc à triple accent grave avec un espace réservé pour le langage.
Pour les blocs de code délimités avec coloration syntaxique, écrivez :
def greet(name: str) -> str: return f"Hello, {name}!"
print(greet("world"))
L'aperçu rend ceci comme un bloc de code coloré. Le panneau de référence rapide en bas de la page montre les neuf patterns syntaxiques en un coup d'œil.
Étape 3 : Vérifier le rendu dans le panneau d'aperçu
Le panneau droit se met à jour pendant que vous tapez. Faites-le défiler indépendamment de l'éditeur pour réviser le document complet. L'attribut data-color-mode="auto" signifie que l'éditeur et l'aperçu s'adaptent automatiquement à la préférence de mode clair ou sombre de votre système d'exploitation.
Vérifiez que :
- Les tableaux s'affichent avec des bordures et un style d'en-tête alterné
- Les liens sont cliquables (ils utilisent des attributs
hrefdans le HTML rendu) - Les blocs de code ont les bonnes couleurs de syntaxe pour le langage que vous avez spécifié
- Les images s'affichent (si vous avez référencé des URL d'images accessibles publiquement)
Étape 4 : Exporter votre document
Choisissez l'export qui correspond à votre cas d'utilisation :
- Copier Markdown — collez le code source brut dans les descriptions de PR GitHub, les commentaires Jira, les pages Notion ou tout champ Markdown
- Copier HTML — collez le balisage rendu dans des éditeurs de texte enrichi qui acceptent les entrées HTML
- Télécharger MD — sauvegarde
document.mddans votre dossier Téléchargements - Télécharger HTML — sauvegarde
document.htmlavec des styles intégrés, prêt à héberger comme page web statique
Le document HTML exporté inclut un bloc <style> avec des valeurs par défaut sensées : pile de polices système, mise en page centrée max-width: 800px, fond de code #f4f4f4, bordure gauche de citation et tableau pleine largeur avec cellules bordées.
Étape 5 : Récupérer un travail précédent avec l'historique
Les supporters premium peuvent utiliser le panneau Historique sous l'éditeur pour restaurer tout document précédemment sauvegardé automatiquement. Les utilisateurs non premium doivent copier ou télécharger leur travail avant de quitter la page, car le contenu de l'éditeur n'est pas conservé entre les sessions.
Exemples pratiques
Rédiger le README d'un projet
Un développeur crée un README pour un nouvel outil CLI. Il écrit :
# my-cli
A command-line tool for batch file renaming.
## Installation
npm install -g my-cli
## Usage
my-cli --pattern "*.log" --prefix "archive-"
## Options
| Flag | Description | Default |
|------|-------------|---------|
| `--pattern` | Glob pattern for matching files | `*` |
| `--prefix` | String prepended to filenames | `""` |
| `--dry-run` | Preview changes without renaming | `false` |L'aperçu en direct montre le tableau avec les en-têtes de colonnes, les blocs de code bash avec coloration syntaxique et la hiérarchie des titres. Il clique sur « Télécharger MD » pour sauvegarder le fichier directement dans la racine de son projet.
Créer une page HTML stylisée à partir de documentation
Un rédacteur technique dispose d'un document Markdown décrivant un endpoint d'API. Il colle le contenu, vérifie l'aperçu, puis clique sur « Télécharger HTML ». Le fichier document.html résultant inclut du CSS intégré et s'affiche correctement lorsqu'il est ouvert dans un navigateur ou envoyé en pièce jointe d'e-mail — aucune feuille de style externe requise.
Rédiger un journal des modifications de version
Un développeur rédigeant un journal des modifications de la version 2.4.0 utilise l'éditeur pour structurer le document avec des titres ## pour « Changements cassants », « Nouvelles fonctionnalités » et « Corrections de bugs », en utilisant des listes non ordonnées sous chacun. Il clique sur « Copier HTML » pour coller le contenu formaté directement dans l'outil de gestion des versions de son entreprise, qui accepte les entrées HTML enrichi.
Conseils et meilleures pratiques
La barre d'outils insère la mise en forme autour du texte sélectionné. Sélectionnez un mot et cliquez sur le bouton Gras ; la sélection devient mot. Si rien n'est sélectionné, le bouton insère un espace réservé comme bold text au curseur.
Les blocs de code délimités nécessitent un identifiant de langage pour la coloration syntaxique. Un bloc ` vide s'affiche comme texte monospace simple. Ajoutez le nom du langage immédiatement après les accents graves d'ouverture ( `typescript , `sql , `yaml ) pour obtenir une sortie colorée.
Copier HTML capture le HTML interne de l'aperçu en direct. La fonction handleCopyHtml lit document.querySelector('.w-md-editor-preview')?.innerHTML. Si l'aperçu n'a pas encore été rendu (par exemple, immédiatement après le chargement de la page), le HTML copié peut être vide. Attendez que l'aperçu soit peuplé avant de cliquer sur « Copier HTML ».
Le HTML téléchargé est autonome. Le fichier document.html inclut tous les styles nécessaires en ligne. Vous pouvez l'envoyer par e-mail, l'héberger sur un serveur de fichiers statiques ou le joindre à un ticket sans actifs supplémentaires.
Effacer ne demande pas de confirmation. Cliquer sur « Effacer » vide immédiatement l'éditeur. Si vous avez du travail non sauvegardé, téléchargez-le ou copiez-le d'abord.
Problèmes courants et résolution
« L'éditeur affiche un indicateur de chargement. » Le composant @uiw/react-md-editor est chargé de façon différée pour éviter les problèmes de rendu côté serveur. L'indicateur apparaît brièvement pendant le chargement du bundle de l'éditeur. Il devrait disparaître en une ou deux secondes avec une connexion normale.
« Copier HTML a produit une sortie vide. » La fonction lit l'innerHTML du conteneur d'aperçu. Si l'aperçu n'a pas encore été rendu (rare mais possible sur des connexions très lentes), cela peut renvoyer une chaîne vide. Faites défiler le panneau d'aperçu pour déclencher un rendu, puis réessayez.
« Mon tableau ne s'affiche pas. » Les tableaux Markdown nécessitent une ligne de séparation de tirets entre la ligne d'en-tête et les lignes de données : |------|------|. Assurez-vous que chaque cellule de la ligne d'en-tête a une cellule de séparation correspondante. Les barres verticales (|) de début et de fin sont optionnelles mais recommandées pour la cohérence.
« Le code délimité n'a pas de coloration syntaxique. » Vérifiez que l'identifiant de langage est sur la même ligne que les accents graves d'ouverture sans espace : `javascript pas ` javascript . Confirmez également que le nom du langage est en minuscules et correctement orthographié (python, pas Python).
« Le fichier MD téléchargé n'a pas d'extension sur macOS. » macOS supprime parfois l'extension .md pour les fichiers qu'il ne reconnaît pas comme type standard. Renommez le fichier pour ajouter .md après le téléchargement, ou configurez votre navigateur pour toujours demander où sauvegarder les téléchargements.
Confidentialité et sécurité
Tout le rendu Markdown, la conversion HTML et l'export de fichiers se produisent entièrement dans votre navigateur. Aucun contenu que vous saisissez n'est transmis aux serveurs de Glyph Widgets ni à des tiers. L'éditeur fonctionne hors ligne une fois que la page a été chargée. Cela le rend sûr pour la documentation interne, les spécifications techniques propriétaires et les ébauches contenant des détails de projets confidentiels.
Questions fréquemment posées
L'éditeur Markdown est-il gratuit ? Oui, entièrement gratuit sans limites d'utilisation. Aucune inscription, abonnement ou paiement d'aucune sorte n'est requis.
Fonctionne-t-il hors ligne ? Une fois que la page se charge et que le bundle de l'éditeur s'initialise, toutes les fonctionnalités d'écriture, d'aperçu et d'export fonctionnent sans connexion réseau.
Mes données sont-elles sécurisées ? Tout ce que vous tapez reste dans la mémoire de votre navigateur. Aucun contenu n'est envoyé à un serveur. Il est sûr de rédiger de la documentation confidentielle, des références d'API internes ou des notes privées.
Quelle variante de Markdown est prise en charge ? L'éditeur utilise @uiw/react-md-editor, qui est basé sur remark et prend en charge la syntaxe CommonMark avec les extensions GitHub Flavored Markdown incluant les tableaux, les listes de tâches et les blocs de code délimités avec des identifiants de langage.
Puis-je intégrer des images ? Oui, en utilisant la syntaxe d'image Markdown standard : !alt text. L'image doit être accessible publiquement — les chemins de fichiers locaux ne fonctionnent pas dans un contexte de navigateur. L'image s'affiche dans l'aperçu en direct immédiatement.
Quels langages sont pris en charge dans les blocs de code délimités ? L'aperçu rend la coloration syntaxique pour tout langage pris en charge par le pipeline remark/highlight.js sous-jacent. Les langages courants — JavaScript, TypeScript, Python, Java, Go, Rust, SQL, Bash, YAML, JSON et bien d'autres — fonctionnent tous avec l'identifiant de langage ajouté au délimiteur d'ouverture.
Le fichier HTML téléchargé nécessite-t-il une connexion internet ? Non. Le document.html exporté contient tous les styles en ligne dans un bloc <style>. Aucun framework CSS externe, ressource CDN ou police n'est chargé. Il s'affiche de façon identique hors ligne.
Puis-je utiliser des raccourcis clavier ? Le composant @uiw/react-md-editor prend en charge les raccourcis d'édition de texte standard (Ctrl/Cmd+B pour le gras, Ctrl/Cmd+I pour l'italique) selon la plateforme. Les boutons de la barre d'outils sont le moyen le plus fiable d'insérer la mise en forme si les raccourcis se comportent différemment sur votre système d'exploitation.
Comment créer une liste de tâches ? Utilisez - [ ] pour un élément non coché et - [x] pour un élément coché :
- [x] Write first draft
- [ ] Review with team
- [ ] PublishQue se passe-t-il avec mon contenu quand j'efface l'éditeur ? L'éditeur se réinitialise immédiatement à une chaîne vide. Le contenu n'est pas récupérable depuis l'outil lui-même, sauf si vous avez précédemment utilisé le panneau Historique (fonctionnalité premium) ou copié/téléchargé le contenu au préalable.
Outils connexes
JSON Formatter — Formatez les données JSON avant de les intégrer dans la documentation Markdown.
Diff Checker — Comparez deux versions d'un document Markdown pour trouver ce qui a changé entre les ébauches.
Text Diff — Un outil de comparaison axé sur le texte pour auditer les modifications de prose dans la documentation.
Essayez l'éditeur Markdown maintenant : Markdown Editor