TK TaskKit
Tools Developer

Preview Markdown

Ketik Markdown, lihat HTML. CommonMark plus tabel dan strikethrough, dengan HTML mentah di-escape dan link disanitasi.

Markdown
Preview
Ketik Markdown di sebelah kiri untuk melihat preview yang ter-render.

Input tetap di perangkat ini. Setiap tool developer di TaskKit berjalan sepenuhnya di browser kamu. Token, payload, dan teks yang di-paste tidak ditransmisikan ke server TaskKit atau pihak ketiga.

Apa yang dilakukan tool ini

Editor Markdown dengan preview HTML live. Ketik CommonMark di kiri, lihat output yang ter-render di kanan. Renderer mendukung elemen block dan inline standar plus tabel dan strikethrough GitHub-flavored. HTML output disanitasi — HTML mentah di sumber di-escape, dan URL javascript:/data: dijatuhkan sebelum mencapai halaman.

Kapan menggunakannya

  • Menyusun README sebelum mem-push-nya ke GitHub.
  • Mem-preview deskripsi issue atau PR tanpa meninggalkan browser.
  • Paste Markdown dari suatu tempat dan mengkonfirmasi itu di-render seperti yang kamu harapkan.
  • Memproduksi HTML bersih yang dapat kamu salin ke CMS yang tidak berbicara Markdown.

Cara kerjanya

Renderer ditulis tangan, ~340 baris, tanpa dependensi Markdown atau sanitizer pihak ketiga. Parsing block menangani heading ATX, paragraf, code fenced dan indented, list (terurut dan tidak terurut), blockquote, garis horizontal, dan tabel pipe GFM. Parsing inline mencakup emphasis, strong, code span, strikethrough, link, gambar, autolink, dan hard line break.

Keamanan diterapkan di dua lapisan. Pertama, setiap run teks melalui escape entitas HTML sebelum mencapai buffer output — jadi <script> literal di sumber menjadi &lt;script&gt;, tidak pernah tag yang ter-eksekusi. Kedua, setiap URL di link atau gambar berjalan melalui allow-list (http(s), mailto, tel, anchor, path relatif) — apapun lainnya dijatuhkan. Ini menangkap javascript:, data:, vbscript:, skema mixed-case (JaVaScRiPt:), dan splicing karakter kontrol (java\tscript:).

Catatan

Mengapa tidak ada syntax highlighting di code block? Highlighter sungguhan (Prism, highlight.js, Shiki) adalah 50–500 KB yang dikirim ke setiap halaman. Kami meninggalkannya untuk menjaga bundle kecil. Tag bahasa masih menjadi nama class (language-js), jadi kamu dapat melapiskan highlighting di atas HTML yang disalin jika kamu butuh.

Apakah ini me-render gambar? Ya, tapi hanya dengan URL yang disanitasi. Path file lokal (./image.png) diizinkan; URI gambar data: tidak.

Seberapa dekat dengan CommonMark? Dekat di 90% umum. Edge case — definisi referensi link, heading setext, list bersarang dengan baris kosong — mungkin berbeda dari spec lengkap.

Tools terkait