Aperçu Markdown avec tableaux, tâches et images
Collez un README dans cet aperçu Markdown et le tableau mal aligné saute aux yeux avant la publication. La source se trouve à gauche, la page rendue à droite. L’outil sert aussi pour un changelog ou un commentaire de ticket. Un compteur au-dessus des panneaux indique le nombre de mots et de caractères du texte.
Écrire un tableau
La première ligne est l’en-tête. Dessous vient une ligne de séparation faite de tirets. Les deux-points y fixent l’alignement : :-- à gauche, :-: au centre, --: à droite. Les barres verticales extérieures sont facultatives. Pour une barre dans une cellule, écrivez \|. Le gras, l’italique, le code et les liens fonctionnent dans les cellules.
Une ligne trop courte est complétée par des cellules vides. Les cellules en trop par rapport à l’en-tête sont supprimées. Aucune ligne vide n’est nécessaire avant le tableau : il peut suivre directement une ligne de texte. En revanche, une cellule ne contient qu’une ligne de texte courant. Une liste ou un second paragraphe n’y entre pas, et un <br> saisi s’affiche comme du texte. Un tableau large défile horizontalement dans l’aperçu.
Syntaxe prise en charge
La page utilise la bibliothèque marked en mode GitHub. Elle rend les titres de niveau 1 à 6, le gras, l’italique, le ~~barré~~, le code en ligne, les blocs de code clôturés, les citations, les listes numérotées et à puces, les listes imbriquées, les listes de tâches, les filets horizontaux, les liens, les images et les tableaux. Une adresse seule comme https://example.com devient un lien sans crochets. Les cases des listes de tâches ne se cochent pas.
Un retour à la ligne dans la source donne un retour à la ligne dans le résultat ; une ligne vide ouvre un nouveau paragraphe. Le nom du langage après la clôture, par exemple js, est accepté, mais le code n’est pas coloré.
Manier les panneaux et le séparateur
- Saisissez ou collez du Markdown dans le panneau « Source Markdown ». Le panneau « Aperçu en direct » se met à jour à chaque frappe.
- Faites glisser le séparateur entre les panneaux à la souris, au doigt ou au stylet. Un double-clic le remet à 50/50. Au clavier, placez le focus sur le séparateur puis utilisez Gauche ou Droite (2 pour cent), Maj avec une flèche (10 pour cent), Début, Fin ou Entrée (réinitialiser).
- « Affichage agrandi » remplit l’écran et garde la largeur choisie.
- « Copier le HTML » copie le corps HTML nettoyé. « Enregistrer en HTML » télécharge
document.htmlavec une courte feuille de style qui couvre aussi les tableaux.
La largeur reste entre 15 et 85 pour cent, et le navigateur la mémorise sur cet appareil dans le stockage local. Sous 860 px, les panneaux s’empilent et le séparateur disparaît.
HTML brut, liens et images distantes
Le HTML saisi dans la source s’affiche comme du texte et ne s’exécute jamais. Les liens ne gardent que ces cibles : http, https, mailto, #ancre et chemins relatifs. Tout autre lien perd sa cible.
L’aperçu ne charge pas les images distantes, car leur chargement fait contacter par votre navigateur le site qui les héberge. Un espace réservé avec le texte alternatif les remplace. Le commutateur « Charger les images externes » les affiche. Les images intégrées sous la forme data:image/png;base64, (aussi JPEG, GIF, WebP et AVIF) s’affichent toujours. Le HTML copié et le HTML enregistré gardent chaque balise d’image avec son adresse.
Ce qui manque et où va votre texte
Il n’y a ni coloration syntaxique, ni notes de bas de page, ni formules, ni codes emoji comme :smile:, ni front matter. Un bloc entre deux lignes --- apparaît comme un filet et un titre. Les deux panneaux ne défilent pas ensemble.
Les bibliothèques marked et dompurify se chargent à l’ouverture de la page. Si le chargement échoue, l’aperçu affiche un message. Ensuite, le navigateur convertit votre Markdown et n’envoie rien ; vous pouvez le vérifier dans l’onglet réseau. Le presse-papiers n’est utilisé que par « Copier le HTML », et le fichier n’est créé que par « Enregistrer en HTML ».
Foire aux questions (FAQ)
| --- | --- |.