TK TaskKit
Developer Tools

Markdown Preview

Type Markdown, see HTML. CommonMark plus tables and strikethrough, with raw HTML escaped and links sanitized.

Markdown
Preview
Type Markdown on the left to see the rendered preview.

Inputs stay on this device. Every developer tool on TaskKit runs entirely in your browser. Tokens, payloads, and pasted text are not transmitted to TaskKit servers or third parties.

What this tool does

A Markdown editor with live HTML preview. Type CommonMark on the left, see rendered output on the right. The renderer supports the standard block and inline elements plus GitHub-flavored tables and strikethrough. The output HTML is sanitized — raw HTML in the source is escaped, and javascript:/data: URLs are dropped before reaching the page.

When you'd use it

  • Drafting a README before pushing it to GitHub.
  • Previewing an issue or PR description without leaving the browser.
  • Pasting Markdown from somewhere and confirming it renders the way you expect.
  • Producing clean HTML you can copy into a CMS that doesn't speak Markdown.

How it works

The renderer is hand-written, ~340 lines, with no third-party Markdown or sanitizer dependency. Block parsing handles ATX headings, paragraphs, fenced and indented code, lists (ordered and unordered), blockquotes, horizontal rules, and GFM pipe tables. Inline parsing covers emphasis, strong, code spans, strikethrough, links, images, autolinks, and hard line breaks.

Security is enforced at two layers. First, every text run goes through HTML-entity escaping before reaching the output buffer — so a literal <script> in the source becomes &lt;script&gt;, never an executing tag. Second, every URL in a link or image runs through an allow-list (http(s), mailto, tel, anchor, relative path) — anything else is dropped. This catches javascript:, data:, vbscript:, mixed-case schemes (JaVaScRiPt:), and control-character splicing (java\tscript:).

Notes

Why no syntax highlighting in code blocks? A real highlighter (Prism, highlight.js, Shiki) is 50–500 KB shipped to every page. We left it out to keep the bundle small. The language tag still becomes a class name (language-js), so you can layer highlighting on top of the copied HTML if you need it.

Does it render images? Yes, but only with sanitized URLs. Local file paths (./image.png) are allowed; data: image URIs are not.

How close to CommonMark is it? Close on the common 90%. Edge cases — link reference definitions, setext headings, nested lists with blank lines — may differ from the full spec.

Related tools