TK TaskKit
Strumenti per dev

Anteprima Markdown

Scrivi Markdown, vedi HTML. CommonMark più tabelle e barrato, con HTML grezzo escapato e link sanificati.

Markdown
Anteprima
Scrivi Markdown a sinistra per vedere l'anteprima renderizzata.

Gli input restano su questo dispositivo. Ogni strumento per dev di TaskKit gira interamente nel tuo browser. Token, payload e testo incollato non vengono trasmessi ai server di TaskKit né a terze parti.

Cosa fa questo strumento

Un editor Markdown con anteprima HTML in tempo reale. Scrivi CommonMark a sinistra, vedi l'output renderizzato a destra. Il renderer supporta gli elementi block e inline standard più tabelle e barrato GitHub-flavored. L'HTML di output è sanificato — l'HTML grezzo nel sorgente viene escapato, e gli URL javascript:/data: vengono scartati prima di raggiungere la pagina.

Quando usarlo

  • Bozzare un README prima di pusharlo su GitHub.
  • Anteprima di una descrizione di issue o PR senza lasciare il browser.
  • Incollare Markdown da qualche parte e confermare che renderizza come ti aspetti.
  • Produrre HTML pulito che puoi copiare in un CMS che non parla Markdown.

Come funziona

Il renderer è scritto a mano, ~340 righe, senza dipendenza Markdown o sanitizer di terze parti. Il parsing block gestisce intestazioni ATX, paragrafi, code fenced e indentato, liste (ordinate e non ordinate), blockquote, righe orizzontali e tabelle GFM con barre verticali. Il parsing inline copre emphasis, strong, code span, barrato, link, immagini, autolink e a-capo duri.

La sicurezza è applicata su due livelli. Primo, ogni run di testo passa per l'escape di entità HTML prima di raggiungere il buffer di output — quindi un <script> literal nel sorgente diventa &lt;script&gt;, mai un tag che si esegue. Secondo, ogni URL in un link o un'immagine passa per un'allow-list (http(s), mailto, tel, ancora, percorso relativo) — qualsiasi altra cosa viene scartata. Cattura javascript:, data:, vbscript:, schema in case mista (JaVaScRiPt:) e splicing tramite caratteri di controllo (java\tscript:).

Note

Perché niente evidenziazione sintattica nei blocchi di codice? Un vero evidenziatore (Prism, highlight.js, Shiki) sono 50–500 KB spediti a ogni pagina. L'abbiamo lasciato fuori per tenere il bundle piccolo. Il tag di linguaggio diventa comunque un nome di classe (language-js), quindi puoi sovrapporre l'evidenziazione sull'HTML copiato se ti serve.

Renderizza le immagini? Sì, ma solo con URL sanificati. I percorsi di file locali (./image.png) sono permessi; gli URI di immagine data: no.

Quanto vicino a CommonMark è? Vicino sul 90% comune. I casi limite — definizioni di riferimento di link, intestazioni setext, liste annidate con righe vuote — possono differire dalla spec completa.

Strumenti correlati