Markdown to HTML Converter & Live Preview
Markdown to HTML with the rendered page beside the source. Pipe tables, 36 highlighted languages, Mermaid diagrams, and a markdown.html download.
Preview
Markdown to HTML
Type Markdown on the left and get clean HTML on the right — then copy or download it.
- Lists, links, and
inline code - Tables and
strikethrough
| Feature | Supported |
|---|---|
| Tables | yes |
| Syntax colors | yes |
| Mermaid | yes |
function greet(name) {
// fenced code is syntax-highlighted
return `Hello, ${name}!`;
}
A mermaid code block renders as a diagram automatically:
flowchart TD
A[Markdown] --> B{Render}
B -->|text| C[HTML]
B -->|diagram| D[Mermaid]
Tip: switch to Preview to give a wide diagram the full width.
Rendered
Not copied
View
What the preview holds
How to use
- The left pane opens with a demo document loaded. Select all and paste your own Markdown over it.
- Editor, Split and Preview under the panes decide how the room is divided. Split is the default, and whichever you pick is remembered next time you open the page.
- Drag the bar between the panes to shift the balance. Focus it and use the arrow keys if you would rather not reach for the mouse.
- Sync scroll is ticked to begin with and keeps both sides at the same proportion of the way down. Untick it when you want to watch one section while editing another.
- Wrap lines is on for this tool, so long lines in the editor fold instead of running off sideways. Untick it in the row under the panes to turn that off.
- Tag your fences. A ```js or ```python fence gets coloured properly, and a ```mermaid fence turns into a diagram.
- Take the result out with Copy HTML for raw markup, Copy rich text when the destination is a word processor or an email, or Download .html for a file with its styling already inside it, named after your first heading.
About this tool
Type on the left, read the result on the right. The preview redraws 200 ms after your last keystroke, which is late enough that it stops flickering mid-word and early enough to feel live. What you are looking at is CommonMark as markdown-it renders it, with GitHub's pipe tables and strikethrough already switched on and bare URLs turned into links because linkify is enabled. Fenced code gets coloured by highlight.js, which is only fetched once your document actually contains a fence. Tag that fence with a language for the best result. Leave it bare and the highlighter guesses, usually right, out of the 36 languages in its common bundle.
The three ways out do different jobs, and the line under the preview's block count names each one. Copy HTML gives you markdown-it's output as it came out of the parser, with no highlighting spans and a mermaid block still a fence. Copy rich text puts the rendered page on the clipboard as text/html, the flavour Google Docs, Gmail and Word paste from, and refuses rather than pretending where the browser has no rich clipboard. Download wraps the rendered page in a full document with its styling inlined, diagrams drawn light for print, and names the file after the first heading.
What it cannot do
- GitHub's task-list checkboxes do not render. Tables and strikethrough ship inside markdown-it itself, but checkbox parsing lives in a plugin that this page does not load, so a line like - [ ] ship it comes out as an ordinary bullet with the brackets still sitting in front of the text, and the page says so when it sees one.
- Raw HTML in the source is escaped rather than executed. markdown-it runs here with html set to false, so an iframe, a script tag or a details block shows up as visible angle brackets. That makes pasting something you did not write harmless, and it also means this is the wrong tool for Markdown that leans on embedded HTML.
- Whatever a documentation framework bolts on top is out of scope. Tabbed code blocks, admonition callouts, footnotes and LaTeX math all pass straight through as text. Typographer is off as well, so straight quotes stay straight and a double hyphen stays a double hyphen.
Frequently asked questions
Why is Copy HTML different from what I see in the preview?
It copies markdown-it's output before the page touches it. Highlighting and Mermaid both run afterwards, against the DOM, so the clipboard gets a clean pre and code pair instead of a nest of hljs spans, and a mermaid block is still a code fence. Use Copy rich text or Download when you want the rendered version.
Do the GitHub checkbox lists work?
They do not. A line like - [x] done renders as a bullet with the brackets intact, because checkbox parsing is a markdown-it plugin and none is loaded here. Tables, strikethrough and automatic linking are all in the base parser, so those come through as you would expect.
How do I get this into Google Docs with the formatting?
Copy rich text is the button for that. It writes the rendered preview to the clipboard as text/html with a plain-text copy alongside it, and Docs, Gmail and Word all read the HTML flavour, so headings stay headings and a pipe table arrives as a real table. Copy HTML would give you the tags as visible characters instead.
Do Mermaid diagrams actually draw, or do I just get the code?
They draw. Put the diagram in a fence tagged mermaid, whether that is a flowchart, a sequenceDiagram or a gantt, and the block is replaced by an SVG. Mermaid is a heavy dependency, so it is only fetched once the rendered page holds such a fence, and a diagram it cannot parse keeps its source in place with mermaid's own message above the preview, rather than taking the preview down with it.
Missing something in Markdown to HTML Converter & Live Preview? Suggest a feature →
Tell someone who needs this.