TK TaskKit
Outils dev

Aperçu Markdown

Tape du Markdown, vois le HTML. CommonMark plus tableaux et barré, avec HTML brut échappé et liens assainis.

Markdown
Aperçu
Tape du Markdown à gauche pour voir l'aperçu rendu.

Les entrées restent sur cet appareil. Chaque outil dev de TaskKit tourne entièrement dans ton navigateur. Tokens, payloads et texte collé ne sont pas transmis aux serveurs de TaskKit ni à des tiers.

Ce que fait cet outil

Un éditeur Markdown avec aperçu HTML en direct. Tape du CommonMark à gauche, vois la sortie rendue à droite. Le moteur de rendu supporte les éléments block et inline standards plus les tables et le barré GitHub-flavored. Le HTML de sortie est assaini — le HTML brut dans la source est échappé, et les URLs javascript:/data: sont retirées avant d'atteindre la page.

Quand l'utiliser

  • Brouillonner un README avant de le pusher sur GitHub.
  • Prévisualiser une description d'issue ou de PR sans quitter le navigateur.
  • Coller du Markdown depuis quelque part et confirmer qu'il rend comme tu l'attends.
  • Produire du HTML propre que tu peux copier dans un CMS qui ne parle pas Markdown.

Comment ça marche

Le moteur de rendu est fait main, ~340 lignes, sans dépendance Markdown ou sanitizer tiers. Le parsing block gère les titres ATX, paragraphes, code fenced et indenté, listes (ordonnées et non ordonnées), blockquotes, lignes horizontales et tables GFM avec barres verticales. Le parsing inline couvre l'emphasis, le strong, les code spans, le barré, les liens, les images, les autolinks et les sauts de ligne durs.

La sécurité est appliquée à deux niveaux. D'abord, chaque run de texte passe par un échappement d'entité HTML avant d'atteindre le buffer de sortie — donc un <script> littéral dans la source devient &lt;script&gt;, jamais une balise qui s'exécute. Deuxième, chaque URL dans un lien ou une image passe par une allow-list (http(s), mailto, tel, ancre, chemin relatif) — n'importe quoi d'autre est retiré. Ça attrape javascript:, data:, vbscript:, les schémas en casse mixte (JaVaScRiPt:) et le splicing par caractères de contrôle (java\tscript:).

Notes

Pourquoi pas de coloration syntaxique dans les blocs de code ? Un vrai colorateur (Prism, highlight.js, Shiki) c'est 50–500 Ko livrés à chaque page. On l'a laissé de côté pour garder le bundle petit. Le tag de langage devient quand même un nom de classe (language-js), donc tu peux superposer la coloration sur le HTML copié si tu en as besoin.

Ça rend les images ? Oui, mais seulement avec des URLs assainies. Les chemins de fichier locaux (./image.png) sont autorisés ; les URIs d'image data: non.

À quel point c'est proche de CommonMark ? Proche sur les 90% courants. Les cas limites — définitions de référence de lien, titres setext, listes imbriquées avec lignes vides — peuvent différer de la spec complète.

Outils liés