TK
Outils dev

Aperçu Markdown

Tape du Markdown, vois le HTML. CommonMark plus tableaux, barré et diagrammes Mermaid. Exporte un vrai PDF en local — pas de boîte d'impression.

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:).

Diagrammes Mermaid

Les blocs fenced marqués mermaid sont passés à la bibliothèque Mermaid et rendus en SVG en direct dans l'aperçu. La bibliothèque est importée dynamiquement à la première occurrence d'un diagramme — qui n'en écrit pas ne la télécharge jamais. Mermaid tourne avec securityLevel: "strict" — pas de JavaScript inline, pas de HTML <foreignObject>, pas de fetch d'images externe.

Types entièrement supportés : flowchart, sequence, class, state, ER, journey, gitGraph, timeline, mindmap, gantt, pie. Les variantes architecture-beta et icon-pack rendent leur géométrie et leur disposition mais perdent les icônes (les icon-packs viennent de CDN par défaut — incompatible avec la posture de confidentialité de cet outil, qui ne fait aucun appel réseau pendant le rendu ou l'export).

Export PDF

Le bouton Exporter PDF produit un vrai PDF téléchargeable — pas un raccourci vers la boîte d'impression — via :

  1. Clonage du DOM de l'aperçu en direct (avec les SVG Mermaid déjà rendus).
  2. Rastérisation de chaque <svg> en <img> PNG plat.
  3. Pagination consciente des éléments — des espaceurs sont insérés pour que les paragraphes, tableaux et diagrammes ne soient pas coupés au milieu par une limite de page.
  4. html2canvas-pro capture la scène hors-écran ; pdf-lib compose le PDF.
  5. Le téléchargement du navigateur est déclenché.

Pas d'upload, pas de window.open, pas de boîte d'impression. Toute la chaîne tourne uniquement dans le navigateur et est importée dynamiquement au premier export.

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