Markdown-esikatselu

A free online Markdown preview and editor — with Mermaid & LaTeX

This Markdown preview renders your text live, side by side, the moment you type. Write in the editor on the left and the formatted result appears instantly on the right — headings, bold, italic, tables, task lists, code blocks, Mermaid diagrams, and KaTeX math all rendered as you go. It's a completely free online Markdown editor and Markdown viewer in one, with no sign-up, no limits, and nothing to install.

Because everything runs in your browser, it's also genuinely private: your text is parsed locally and auto-saved to your own device, never uploaded to a server. That makes it faster and more private than cloud editors like StackEdit, HackMD, or Dillinger.io for everyday Markdown work — and it works offline once the page has loaded. No account, no subscription, no cloud storage required.

GitHub-Flavored Markdown, rendered the way you expect

The previewer supports GitHub-Flavored Markdown (GFM), so tables, task lists, strikethrough, autolinks, and syntax-highlighted fenced code blocks render the same way they do in a GitHub README. Type a pipe table or a - [x] checklist and it appears formatted on the right — a reliable GitHub README preview for anyone who writes documentation, issues, or pull-request descriptions.

A formatting toolbar adds bold, italic, strikethrough, inline code, headings, bullet, numbered, and task lists, quotes, links, images, tables, code blocks, and dividers with one click. Keyboard shortcuts (Ctrl+B, Ctrl+I, Ctrl+K, Ctrl+F) work just like in a desktop editor. A live word, character, and reading-time count, an auto-generated table of contents from your headings, find & replace, and multiple view modes (editor only, split, preview only, fullscreen) keep editing comfortable on any screen size.

Mermaid diagrams, LaTeX math, and syntax-highlighted code

This is where it pulls ahead of bare-bones previewers. Drop a ```mermaid block and your flowchart, sequence diagram, class diagram, Gantt chart, or pie chart renders live as an SVG that adapts to light and dark mode. The built-in VS Code Markdown preview requires the 'Markdown Preview Mermaid Support' extension to do this — here it works out of the box. Dillinger.io and the basic Marked.js demo don't support Mermaid at all.

Write inline $E = mc^2$ or a $$\int_0^\infty e^{-x^2} dx$$ block and the LaTeX math is typeset instantly with KaTeX — no MathJax, no network request, no delay. Fenced code blocks are colored by highlight.js across 180+ languages in a GitHub-style theme. These heavier renderers load only when your document actually uses them, so the page stays fast for plain text.

A no-install alternative to VS Code, Typora, Dillinger, StackEdit, and Obsidian

If you usually reach for the VS Code Markdown preview (Ctrl+Shift+V) or the side-by-side split (Ctrl+K V), this page does the same job without opening an editor. It's ideal when you're on a machine without VS Code, when you just need a quick render check, or when VS Code's preview doesn't have Mermaid or math support configured. Typora's seamless editing mode is uniquely elegant but costs $14.99 — this tool is free and requires no installation.

StackEdit supports KaTeX and Mermaid but requires cloud sync accounts for workspace features. HackMD is a powerful collaboration platform but stores documents on its servers with public access by default and requires sign-in for most features. Obsidian is excellent for linked note-taking but is an installed app with its own vault format. Notion requires an account and uses a block-based editor rather than standard Markdown. This tool gives you Mermaid + KaTeX + GFM + export in a single instant-load page with full privacy and no account.

Export to PDF, HTML, or Markdown — and share with a URL

When a document is ready, take it anywhere. Export to PDF prints the rendered page — Mermaid diagrams, KaTeX math, and highlighted code included — to a file using the browser's print API, with clean print CSS that removes UI chrome. Download .html saves a self-contained web page with styles inlined; Download .md keeps the source. You can also copy the clean rendered HTML, or copy as rich text to paste formatted into Gmail, Google Docs, or Notion.

Need to send it to someone? Share encodes the whole document into the link (compressed with LZ-string) and copies the URL to your clipboard. Open that link and the text loads straight back into the editor — no account, no server, no upload. Because the content lives in the URL, sharing is instantaneous and private. Cloud editors like StackEdit and HackMD store your document on their servers to generate share links; this tool stores it in the URL itself, which is a meaningful privacy and reliability difference.

Safe output, auto-save, and total privacy

Previewing Markdown from an external source — a downloaded file, a comment export, a colleague's content — shouldn't be risky. After parsing, this tool sanitizes the rendered HTML with DOMPurify, stripping script tags, inline event handlers, and javascript: URLs before displaying anything. The preview faithfully shows your content but is safe from cross-site scripting (XSS). Most simple online previewers skip sanitization entirely — this one doesn't.

Everything updates the instant you type. Your draft auto-saves to local storage so closing the tab won't lose your work. You can paste or drag an image straight into the editor to embed it. No sign-up, no upload, no tracking. For drafting documentation, previewing a README, rendering Mermaid and math, converting Markdown to clean HTML and PDF, or just seeing how a snippet looks before publishing — this live Markdown preview does the whole job in one fast, private, offline-capable page.

The history and philosophy of Markdown

John Gruber and Aaron Swartz created Markdown in 2004. Gruber published the format on his blog Daring Fireball and defined its core philosophy: a plain-text writing format that closely mirrors how people already compose email and informal prose, then converts cleanly to valid XHTML. The design goal was deliberate minimalism — angle brackets and HTML entities should be rare in prose, and the source text should be readable without rendering it first. Swartz contributed the initial Perl implementation, a roughly 1,500-line script called Markdown.pl. That implementation defined the syntax by example rather than by a formal grammar, which had lasting consequences.

Gruber retained ownership of the Markdown name and specification and never formally transferred either to a standards body. As adoption exploded — spreading from blogging into documentation tools, code forges, and messaging platforms — developers encountered the ambiguity in the original spec and filled gaps differently, producing a proliferation of incompatible dialects. By 2012 the fragmentation was severe enough that Jeff Atwood (co-founder of Stack Overflow) and linguist and programmer John MacFarlane began working on a formal, unambiguous specification. That effort launched publicly in 2014 under the name CommonMark — a complete grammar with thousands of test cases covering every edge case in the original spec. CommonMark did not replace Markdown; it became the interoperable baseline that most modern parsers now implement, from GitHub's renderer to the parsers embedded in VS Code and Obsidian.

GitHub built its own superset on top of CommonMark called GitHub Flavored Markdown (GFM). GFM adds four extensions not in CommonMark: pipe tables (with column alignment via colons), task list items (- [ ] and - [x]), strikethrough with double tildes (~~text~~), and fenced code blocks with an info string for syntax highlighting. Because GitHub hosts the README files, issues, pull requests, wikis, and discussion threads of the majority of the world's open-source projects, GFM has effectively become the dominant Markdown dialect for developer-facing writing — which is why this previewer supports it as the default.

Markdown dialect comparison: CommonMark, GFM, MultiMarkdown, Pandoc, R Markdown, and MDX

The original 2004 Markdown.pl spec is the common ancestor but is now rarely used directly, since its ambiguity means two compliant implementations can disagree on the same input. CommonMark is the standardised successor: it resolves all known ambiguities with a formal grammar, has a canonical reference implementation (cmark, written in C), and is now the basis of the Markdown parsing in GitHub, GitLab, Discourse, and many other platforms. CommonMark is deliberately minimal — it specifies only what the original Markdown covered, leaving extensions like tables and task lists to dialect-specific layers. GitHub Flavored Markdown (GFM) adds those extensions on top of CommonMark and is also used by Bitbucket and numerous CI systems that render repository documentation. MultiMarkdown (MMD), developed by Fletcher Penney, predates CommonMark and adds features CommonMark still lacks: footnotes, definition lists, pipe tables (which later influenced GFM), citation support, and cross-references — making it popular in academic and long-form writing workflows.

Pandoc's Markdown is the most feature-rich dialect in widespread use. Because Pandoc is a universal document converter (Markdown → LaTeX → PDF, Markdown → DOCX, Markdown → EPUB, and dozens of other paths), its Markdown needs to carry document-level metadata and features that plain CommonMark omits. Pandoc adds footnotes, citations via BibTeX or CSL, LaTeX math, custom attributes on any block or inline element ({.class #id key=value}), definition lists, example lists, and raw LaTeX or HTML passthrough — essentially everything needed to author a full academic paper in Markdown. R Markdown (Rmd) takes a different dimension: instead of extending the syntax, it embeds executable R code chunks that are evaluated at render time, weaving code output (tables, plots, console results) directly into the document. Developed at RStudio (now Posit), R Markdown powers reproducible research documents, data science reports, and interactive notebooks; its successor Quarto generalises the same concept to Python, Julia, and Observable. MDX goes further still, replacing the prose-plus-code model with prose-plus-React: any .mdx file is valid Markdown where JSX tags are parsed as first-class elements, allowing React components to live inline with Markdown text. Gatsby and the Next.js documentation ecosystem use MDX heavily, and the Astro framework on which this site is built supports MDX natively alongside its own content collections.

Choosing a dialect depends on your output target. For documentation that lives on GitHub or a code forge, GFM is the right choice — your content will render identically in pull-request descriptions, README files, and wiki pages without any extra configuration. For a static site built on Jekyll, Hugo, Astro, or Gatsby, the site's Markdown processor (often CommonMark or Remark) determines which extensions are available; frontmatter YAML between --- delimiters is universal to all these generators regardless of which dialect they use for body text. For academic publishing or conversion to DOCX and PDF, Pandoc's Markdown is the practical choice because Pandoc's document model maps to those formats far more completely than any web-oriented dialect. This previewer targets the GFM/CommonMark sweet spot — the dialect most developers actually write day-to-day — and layers on KaTeX math and Mermaid diagrams as first-class extensions.

Markdown in developer tooling: static site generators, documentation platforms, and knowledge management

Markdown became the native content format for the Jamstack architecture — the pattern of pre-rendering static HTML at build time from a Git repository and serving it from a CDN, with no origin server. In the Jamstack model, Markdown files are the content layer, Git is the CMS, and a static site generator is the build tool. Jekyll, the Ruby-based generator that GitHub Pages uses as its default, popularised front matter YAML (----delimited metadata blocks at the top of each .md file) and demonstrated that a documentation or blog site could be built entirely from a folder of text files with zero database. Hugo, written in Go, pushed the performance boundary further — builds of tens of thousands of Markdown files complete in seconds — and introduced shortcodes, Hugo's template-based extension mechanism for embedding dynamic content inside Markdown. Gatsby and Next.js brought the React component model to static generation, allowing Markdown content to be queried via GraphQL or file-system APIs and rendered inside interactive React layouts. Astro, the framework powering this site, extends that model with its island architecture: Markdown and MDX files render as zero-JavaScript HTML by default, with opt-in interactive islands for components that need it — giving the content performance of a static file with the interactivity of a component framework where it genuinely matters.

In the documentation tooling space, Markdown is equally dominant. Docusaurus (maintained by Meta/Facebook) is the framework behind React, Create React App, and Jest's documentation sites — it combines Markdown/MDX pages with versioning, search, and i18n out of the box. MkDocs with the Material theme is the go-to choice for Python project documentation, generating fast static sites from a folder of Markdown files with a YAML config. GitBook and Notion both offer Markdown import and export while providing richer visual editing layers on top. Confluence supports Markdown paste as an input mode. The practical consequence is that knowing Markdown well means your writing is portable across nearly every documentation platform in common use — a document written in standard CommonMark/GFM can be published on GitHub Pages, Netlify, Vercel, Confluence, Notion, and GitBook with minimal or no reformatting.

Beyond documentation, Markdown has become the substrate for personal knowledge management (PKM) tools. Obsidian stores every note as a plain .md file in a local vault folder, making notes easy to back up, version-control with Git, and process with external scripts. Its defining extension is wiki-link syntax ([[Note Title]]) for linking notes by name without knowing their file paths — a pattern Obsidian inherited from Roam Research and Foam. Foam is a VS Code extension that brings the same [[wiki-link]] graph-based note-linking to a folder of Markdown files directly inside the editor, with zero cost and no proprietary file format. Both tools demonstrate a key advantage of building on Markdown: because notes are plain text files, you can switch tools, write custom scripts, or open your entire knowledge base in a standard text editor at any time. The portability of Markdown is not just a convenience — for long-lived knowledge bases that you might maintain for years or decades, it is the most important reason to choose it over a proprietary format.