Markdown Previewer
Workshop notes
Welcome to the chekkutooru markdown bench. Everything renders live as you type.
Supported bits
- Bold and italic text
inline codespans- Links, http(s) only
- Blockquotes and horizontal rules
A little code
const bench = "hinoki"; console.log(bench);
Measure twice, cut once.
- First step
- Second step
- Ship it
Supports headings (# to ####), bold, italic, inline and fenced code, http(s) links, lists, blockquotes, and --- rules, rendered safely with no raw HTML, entirely in your browser.
How it works
仕組みType Markdown on the left and watch it render on the right, live with every keystroke. This previewer implements a deliberately small, safe subset: headings # through ####, **bold**, *italic*, `inline code`, fenced code blocks, http(s) links, bulleted and numbered lists, blockquotes, and --- rules. It builds the preview from real React elements rather than injected HTML, so pasted text can never smuggle scripts onto the page. It’s a quick scratchpad for drafting a README, an issue comment, or a blog snippet and seeing exactly how the structure will read before you post it.
The renderer intentionally supports a small, safe subset and never injects HTML, which rules out raw tags and keeps pasted content from executing anything. Tables and images are the most common omissions; for those, preview in the destination platform itself. The supported subset covers the structure of most READMEs and comments.
Only links whose URL starts with http:// or https:// become clickable; anything else, including javascript: and data: URLs, is deliberately rendered as plain text for safety. Relative links also stay plain, since there’s no site for them to be relative to inside a previewer. Add the full https:// prefix and the anchor appears.
Structurally yes, pixel-for-pixel no. Markdown has many dialects: GitHub-Flavored Markdown, CommonMark, and others differ in edge cases, and every site applies its own fonts and spacing. Use this preview to confirm headings, lists, emphasis, and code blocks are marked up correctly, then trust the destination’s own renderer for final appearance.