Aller au contenu principal
LibraTool logoLibraTool

Éditeur Markdown — outil gratuit

Rédigez et prévisualisez du Markdown en temps réel. Prend en charge les titres, le gras, l'italique, les blocs de code, les tableaux et les listes.

Fonctionne hors ligne une fois chargé
100 mots · 599 caractères
Markdown
Aperçu
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Bienvenue dans l'éditeur Markdown</h2> <p class="my-3 text-slate-700 dark:text-slate-300 leading-relaxed">Écrivez du <strong>Markdown</strong> à gauche, consultez l'aperçu en direct à droite.</p> <h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Fonctionnalités</h3> <ul class="list-disc list-inside my-3 space-y-0.5 text-slate-700 dark:text-slate-300"><li class="my-0.5"><strong>Gras</strong>, <em>italique</em> et <del>barré</del></li><li class="my-0.5">Code <code class="bg-slate-100 dark:bg-slate-800 text-pink-600 dark:text-pink-400 rounded px-1 py-0.5 text-[0.85em] font-mono">en ligne</code> et blocs de code délimités</li><li class="my-0.5"><a href="https://libratool.com" target="_blank" rel="noopener noreferrer" class="text-teal-600 dark:text-teal-400 underline underline-offset-2">Liens</a></li><li class="my-0.5">Listes, citations, tableaux et bien plus</li></ul> <h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Exemple de code</h3> <pre class="bg-slate-900 dark:bg-slate-950 text-slate-100 rounded-lg p-4 overflow-x-auto text-sm font-mono my-4"><code class="language-javascript">function greet(name) { return `Hello, ${name}!`; }</code></pre> <blockquote class="border-l-4 border-teal-400 dark:border-teal-600 pl-4 my-3 text-slate-600 dark:text-slate-400 italic">Markdown a été créé par John Gruber en 2004 pour rendre l'écriture pour le web plus facile.</blockquote> <table class="my-4 w-full text-sm border-collapse"><thead><tr><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">Fonctionnalité</th><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">Pris en charge</th></tr></thead><tbody><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Titres</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Listes</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Tableaux</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Code</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr></tbody></table>
Aide-mémoire Markdown
# Heading 1H1
**bold**Gras
*italic*Italique
`code`Code en ligne
- itemListe à puces
1. itemListe numérotée
> quoteBloc de citation
[text](url)Lien
![alt](url)Image
---Séparateur

Utilisations courantes

  • Rédiger la documentation API en MarkdownRédigez les descriptions des points de terminaison, les exemples de demande/réponse et les tableaux de paramètres en Markdown.
  • Prendre des notes en MarkdownÉcrivez des notes structurées en Markdown qui peuvent être collées dans Notion, Obsidian, Bear ou n'importe quelle application Markdown.
  • Écrire un README GitHub en MarkdownRédigez et prévisualisez le README de votre référentiel GitHub avec rendu Markdown en direct.
  • Rédiger une documentation techniqueÉcrivez et prévisualisez la documentation API, les wikis et les guides techniques en Markdown avant la publication.
  • Écrire des articles de blog en MarkdownRédigez des articles de blog en Markdown pour Ghost, Jekyll, Hugo, Hashnode et autres plates-formes de publication basées sur Markdown.

Comment ça marche

L'aperçu est rendu par un analyseur Markdown écrit à la main intégré directement dans l'outil — pas de marked, pas de remark, pas de bibliothèque externe. Il tokenise la source ligne par ligne dans le navigateur, convertissant la syntaxe en HTML qui passe ensuite par un assainisseur avant l'affichage.

  1. 1
    Tokenisation ligne par ligne
    La fonction personnalisée renderMarkdown découpe votre source sur les sauts de ligne et la parcourt en une seule passe, faisant correspondre les blocs de code délimités, les titres (H1–H6), les citations, les listes ordonnées et non ordonnées, les tableaux GFM (avec alignement de colonnes), les règles horizontales, et les paragraphes par ordre de priorité.
  2. 2
    Expansion de syntaxe en ligne
    Chaque ligne ou cellule collectée est ensuite traitée par inlineMarkdown, une chaîne de remplacements par expression régulière qui gère le gras (** et __), l'italique (* et _), le gras-italique (***), le barré (~~), le code en ligne, les images (![alt](url)), et les liens ([texte](url)) — les images sont résolues avant les liens afin que le préfixe ! ne soit pas consommé incorrectement.
  3. 3
    Assainissement et blocage des ressources distantes
    Le HTML brut produit par le moteur de rendu passe par un assainisseur (sanitize-html) pour retirer les balises et attributs dangereux comme <script>, les gestionnaires onerror, et les hrefs javascript:. Une seconde passe (neutralizeRemote) remplace par défaut les valeurs src d'images distantes par des espaces réservés, empêchant l'aperçu de contacter silencieusement des serveurs externes avant que vous n'y consentiez.
  4. 4
    Export en .md ou en .html autonome
    Copier ou télécharger en Markdown écrit le texte source brut. Télécharger en HTML enrobe le résultat assaini dans un document autonome avec sa propre feuille de style en ligne — les classes Tailwind ne fonctionnent qu'à l'intérieur du site, l'export regroupe donc des règles CSS brutes à la place, rendant le fichier lisible n'importe où.

Outils associés

📝

Convertisseur HTML vers Markdown

Convertissez HTML en Markdown propre. Gère les titres, listes, liens, images, blocs de code, tableaux et citations. Idéal pour extraire du contenu de CMS.

Essayer
🔄

Convertisseur Markdown vers HTML

Convertissez du Markdown en HTML propre avec aperçu en direct. Utilisez la vue source pour copier du HTML prêt à coller pour les blogs, CMS ou modèles d'e-mail.

Essayer
📊

Éditeur de diagrammes Mermaid

Rédigez des organigrammes, diagrammes de séquence, diagrammes de Gantt et plus encore en syntaxe Mermaid avec un aperçu en direct. Exportez en SVG ou PNG. S'exécute entièrement dans votre navigateur.

Essayer

Questions fréquemment posées