Add Markdown Preview tool

[02karthik]

What is this tool?

Markdown Preview is a single-file, fully-offline live Markdown editor: you write Markdown on the left and watch it render instantly on the right. It's for anyone drafting notes, docs, or READMEs who wants to see the formatted result as they type — a natural fit for a markdown-native knowledge workspace, and distinct from the existing markdown-table (which only generates table syntax).

Why this tool? Hillnote is a markdown-native workspace whose signature capture card turns any source into clean Markdown — yet the catalog had no live Markdown editor. This fills that gap in the Writing category.

What it does

• Live split-pane editor + rendered preview (on mobile, a Write / Preview tab toggle).
• Renders headings, bold / italic / strikethrough, inline & fenced code, ordered / unordered lists, task lists (- [x]), blockquotes, GFM pipe tables with alignment, links, data-URI images, and horizontal rules.
• Formatting toolbar (heading, bold, italic, strike, lists, quote, link, inline code, code block) with Ctrl/⌘+B / Ctrl/⌘+I shortcuts and Tab-to-indent.
• Live word / character / line counts and a reading-time estimate.
• Copy Markdown, Copy HTML, and Clear; the draft is persisted in localStorage under markdown-preview:v1.
• Palette + shapes follow the Hillnote design system: azure #4d63ff primary, cool-mist canvas, near-black ink, Manrope display + Inter body, 24px card radius.

Checklist

• It's a single file: markdown-preview/index.html with all CSS + JS inline.
• It is fully self-contained / offline — no remote fonts, scripts, styles, images, fetch, or import.
• No analytics, trackers, or phone-home behavior.
• Added a screenshot at screenshots/markdown-preview.webp (via npm run screenshot).
• Registered the tool in tools.json (dir matches the folder name).
• Bumped the top-level catalogVersion (21 → 22).
• New tool — version is 1.
• npm run validate passes locally (✓ catalog valid — 28 tools, catalogVersion 22, 0 warnings).

Notes for reviewers

• Safety: all user input is HTML-escaped before any Markdown transform runs, so typed markup is inert and the only tags in the output are the ones the parser inserts (no sanitizer needed). Link URLs are scheme-sanitized — javascript: and other unknown schemes fall back to #; images only load inline data:image/… URIs and otherwise degrade to their alt text, so nothing appears broken under the app's CSP.
• Parser: the Markdown → HTML pass is a compact line-based block parser plus an inline pass. Code spans are stashed behind private-use-area sentinels before other inline rules run, so digits and underscores in ordinary prose (e.g. "3 cats", my_var_name) are never mangled. I verified rendering across 17 cases (headings, emphasis, code, lists, task lists, quotes, tables, links, images, escaping, XSS-URL sanitization, paragraphs).
• Everything runs on-device; the draft never leaves the browser.

---

Generated by Claude Code