Markdown Previewer
Edit and preview Markdown with syntax highlighting, math, and diagrams
Markdown Previewer
Edit and preview Markdown with syntax highlighting, math, and diagrams
Features
- Three view modes — Edit, Preview, Split — switched with a one-click toolbar; the chosen mode persists in localStorage for the next session
- Live preview rendered through markdown-it with GitHub-Flavored Markdown: tables, footnotes, task lists, definition lists, autolinks
- Code-block syntax highlighting on the preview side so fenced ```lang blocks colour correctly without a round-trip
- KaTeX math: inline `$ E = mc^2 $` and block `$$\int_a^b f(x) dx $$` render server-side-safe (no eval) with proper kerning
- Mermaid diagrams: paste ```mermaid blocks (flowchart, sequence, gantt, class) and they render inline in the preview panel
- Toolbar shortcuts for bold, italic, code, headings, lists, task lists, links, images, tables, inline math, math block, and mermaid — each inserts the right syntax at the cursor
- Copy HTML, Download Markdown (.md), and Download PDF — three independent export paths, no server roundtrip for HTML/MD
- Pure client-side rendering with output sanitisation: pasted HTML inside markdown is escaped, so untrusted source can't inject scripts into the preview
How to use
- Start typing markdown in the editor — the preview pane updates on every keystroke (rAF-throttled for smoothness).
- Use the toolbar to insert headings, lists, links, code blocks, math, or mermaid diagrams without remembering the syntax.
- Switch view modes (Edit / Preview / Split) with the top buttons — your choice persists across sessions.
- Drag the gutter between editor and preview (or arrow-keys when focused) to adjust the split ratio.
- When done, Copy HTML to paste into a rich-text editor, Download Markdown for source control, or Download PDF for sharing with non-developers.
- Paste an image into the editor — it embeds inline as a data URL so the preview shows the actual content without a server round-trip.
Tips & Best Practices
- Use Split view for long documents — you see the rendered result without losing place in the source.
- Mermaid diagrams render best when the source is at least 4 nodes deep; trivial 2-node flows look more polished as plain markdown headings.
- For shareable math notes, prefer Download PDF over Copy HTML — the recipient doesn't need KaTeX CSS installed.
- When pasting from rich-text sources (Notion, Google Docs), use the editor's "paste as plain markdown" workflow: the GFM extensions will reformat tables and headings cleanly.
- Inline images via data URL bloat the markdown file — keep them for previews, but replace with real URLs before committing to git.
FAQ
Which markdown flavour does the previewer use?
GitHub-Flavored Markdown (GFM) via markdown-it. That means tables with `|`, task lists `- [ ]`, autolinks, fenced code blocks, and strikethrough work the same way they do on github.com. Footnotes, definition lists, and inline HTML escaping are enabled.
Is KaTeX math really rendered or just escaped?
Rendered. Single-dollar pairs `$x$` produce inline math; double-dollar pairs `$$x$$` produce block math. KaTeX runs in the browser, so the output is a styled DOM tree (not MathML or a server image) — copy-paste from the preview into Notion / Slack / a PDF retains the visual output.
Are mermaid diagrams supported?
Yes — wrap your mermaid source in a ```mermaid fenced block. Flowchart, sequence diagram, class diagram, ER diagram, gantt, and state diagram all render inline. The mermaid library is lazy-loaded on first use, so the first diagram has a brief delay; subsequent renders are immediate.
What does Copy HTML produce?
The exact HTML the preview panel renders, with KaTeX classes preserved (so it styles correctly when the destination has KaTeX CSS) and mermaid SVG inlined (so it renders standalone). Code blocks include `<pre><code class="language-…">` for re-highlighting in the destination.
Can I paste images?
Yes — Ctrl/Cmd+V an image and it embeds as a data URL (``) inline in the markdown. The output is large (base64 inflates by ~33%), so for production prefer hosting the image and pasting a real URL. Drag-and-drop is also supported.
Is anything sent to a server?
No. Markdown parsing, KaTeX, mermaid, and PDF generation all happen in your browser. DevTools Network stays empty during preview; the page works offline once cached.
How does Download PDF work?
A browser-native print pipeline turns the rendered HTML into a PDF with the same styling as the preview. Embedded math and mermaid diagrams are included; page breaks happen at natural HTML block boundaries. The file lands in your default downloads folder.
Can I export HTML for use in a static site?
Yes — Copy HTML gives you the preview body. For full-page HTML, wrap it with a `<html><head>` template that includes the KaTeX stylesheet (`katex.min.css`) and a mermaid initialiser, and you have a self-contained page.