← Text

Markdown Preview

Write Markdown on the left and see the rendered page on the right, then copy the HTML or download the file.

Markdown

Words
0
Characters
0
Lines
0
Headings
0

Preview

About this tool

This Markdown preview renders what you type as you type it, side by side with the source. It covers the everyday Markdown most sites and tools accept: ATX and setext headings, paragraphs, bold, italic, strikethrough, inline code, fenced code blocks, blockquotes, bulleted and numbered lists with one level of nesting, task-list checkboxes, links, horizontal rules, GitHub-style pipe tables with column alignment, and hard line breaks from two trailing spaces or a backslash. Any raw HTML in the source is displayed as literal text rather than injected into the page, and links with javascript: or other scripting schemes are rendered without an href, so pasting an untrusted document is safe. You can copy the generated HTML, download it as a standalone .html file with basic styling, or save the source as .md. A sync-scroll toggle keeps the preview aligned with the editor. It is aimed at people writing README files, documentation, blog posts, and forum or issue comments who want to check the result before publishing.

How it works

The renderer is a small line-based parser written for this page rather than a third-party library. It walks the source line by line, recognizing block structures in priority order: fenced code (three or more backticks or tildes), headings, horizontal rules, blockquotes (parsed recursively), tables (a header row plus a delimiter row of dashes with optional colons for alignment), list blocks (bullet or numbered items, with deeper-indented items grouped one level down), and finally paragraphs. Inline formatting is applied to the text of each block: code spans are pulled out first so their contents stay literal, then the remaining text is HTML-escaped, after which patterns for images, links, autolinks, bold, italic, strikethrough, and line breaks insert markup. Because escaping happens before any tags are generated, the only tags in the output are ones the renderer itself wrote. Link destinations are allowed only if they start with http://, https://, mailto:, or are relative paths, anchors, or queries; any other URL scheme, including javascript: and data:, produces a link without an href. Images are shown as their alt text in brackets rather than fetched.

Frequently asked questions

Which Markdown dialect does the preview follow?

It follows CommonMark for the core syntax and adds the GitHub Flavored Markdown extensions people use most: pipe tables, strikethrough with ~~, task-list checkboxes, and autolinks in angle brackets. It does not implement every edge case of the CommonMark spec, such as multi-paragraph list items, footnotes, definition lists, or nested blockquotes inside lists, so an unusual document may render slightly differently on GitHub or in another editor.

Why is my raw HTML shown as text instead of rendered?

For safety. Many Markdown processors pass HTML through, but that means a pasted document could inject scripts, forms, or tracking images into the page. This preview escapes every < and > in the source so tags appear literally, and it strips javascript: and data: link destinations. If you need inline HTML in your final document, add it after exporting the .html file.

How do I make a table with aligned columns?

Write a header row with cells separated by pipes, then a delimiter row where each cell is a run of dashes. Add a colon on the left of the dashes for left alignment, on the right for right alignment, or on both sides for centered text. For example: | Item | Price | followed by |:-----|------:| left-aligns the first column and right-aligns the second. Body rows follow with the same number of cells; missing cells are left empty.

What does the downloaded .html file contain?

A complete standalone page: a doctype, UTF-8 charset, a viewport tag, a title taken from your first heading, a small embedded stylesheet for readable typography, code blocks, quotes, and tables, and the rendered HTML in the body. It has no scripts and no external requests, so it can be opened offline, attached to an email, or dropped into a static site. Copy HTML gives you just the body fragment for pasting into a CMS.

Related tools

Word Counter · Case Converter · Text Diff · Lorem Ipsum Generator · Slug Generator · Line Tools · Find and Replace · Text Cleaner

Browse all Text Tools, or go back to every free tool on HeroYears.