Markdown to HTML Converter
Markdown
empty
Preview
live
HTML Output
ready
How the Converter Works
Markdown turns into HTML by simple rules: # Title becomes an <h1>, **bold** becomes <strong>, and a blank line starts a new <p> paragraph. Type or paste Markdown above to see a live preview and clean HTML you can copy or download. The converter follows CommonMark plus GitHub's tables, task lists and strikethrough, and runs in your browser.
The text is read in two passes, the same way CommonMark describes it: first the block structure (headings, paragraphs, lists, quotes, code blocks, tables), then the inline formatting inside each block (emphasis, code spans, links, images). Every character of your text is HTML escaped on the way out, so the preview can only contain the tags Markdown itself produces.
Markdown to HTML Cheat Sheet
Every output below was produced by this converter with the default options.
| Markdown | HTML output | Note |
|---|---|---|
# Heading 1 | <h1 id="heading-1">Heading 1</h1> | Heading, levels 1 to 6 |
Title | <h1 id="title">Title</h1> | Setext style heading |
**bold** and *italic* | <p><strong>bold</strong> and <em>italic</em></p> | Emphasis |
***both*** and ~~gone~~ | <p><em><strong>both</strong></em> and <del>gone</del></p> | Bold italic, strikethrough (GFM) |
snake_case_name | <p>snake_case_name</p> | Underscores inside words stay literal |
`code` and \*not italic\* | <p><code>code</code> and *not italic*</p> | Code span, backslash escape |
[text](https://example.com "Title") | <p><a href="https://example.com" title="Title">text</a></p> | Link with title |
 | <p><img src="/logo.png" alt="logo"></p> | Image |
<https://example.com> | <p><a href="https://example.com">https://example.com</a></p> | Autolink |
- item | <ul> | Nested list (indent 2 spaces for "- ") |
1. first | <ol> | Ordered list |
- [x] done | <ul> | Task list item (GFM) |
> quoted | <blockquote> | Blockquote |
--- | <hr> | Horizontal rule |
line one | <p>line one<br> | Two trailing spaces: line break |
<b>raw</b> | <p><b>raw</b></p> | Raw HTML is shown as text |
Fenced code blocks keep their language name as a class, so ```js gives <pre><code class="language-js">, ready for Prism or highlight.js. Headings get an id made from their text (## Next Steps gets id="next-steps"), so you can link to #next-steps.
Why Raw HTML Is Shown as Text
CommonMark lets raw HTML pass straight through, which is how a pasted <img src=x onerror=...> or a javascript: link can run script in a preview. This converter takes the safe route:
- Any HTML tag in your Markdown appears as literal text in the preview and is escaped in the output.
- Links may use http, https, mailto, tel, ftp or a relative path; anything else, such as
javascript:ordata:text/html, is dropped and only the link text is kept. - Images may use http, https, relative paths or data URLs of PNG, GIF, JPEG, WebP or AVIF images.
- Titles, alt text and URLs are escaped, so quotes in them cannot break out of the attribute.
If you need a real HTML element, such as a <details> block, copy the converted HTML and add it there. If your own site renders Markdown written by users, run the output through an HTML sanitizer such as DOMPurify as well.
Common Markdown Mistakes
- No space after #:
#Headingis a paragraph. Write# Heading. - Nested list not nesting: the child must be indented to where the parent's text starts: 2 spaces under
- item, 3 under1. item. - A line break that is not there: a single newline inside a paragraph is just a space. End the line with two spaces or a backslash, or tick "Line breaks as <br>".
- Numbered list restarts at 1: a list that starts with 3. keeps that number (
<ol start="3">), and switching between1.and1)starts a new list. - Code fence swallowing the page: a fence closes only with the same character (backtick or tilde) and at least as many of them as opened it.
- Table not rendering: the second line must be the delimiter row (
| --- | --- |) with the same number of cells as the header.
Converting documentation that contains JSON or SQL? Tidy the snippets first with the JSON formatter or the SQL formatter, then paste them inside a fenced code block.
Method and sources. Block and inline rules follow the CommonMark specification (version 0.31.2); tables, task list items, strikethrough and bare URL autolinks follow the GitHub Flavored Markdown specification. Unlike both specs, raw HTML is escaped rather than passed through, for safety. The cheat sheet outputs were generated by running this page's converter in Node.js.
Markdown to HTML Guide
Markdown is a lightweight markup language created by John Gruber and Aaron Swartz in 2004. The goal was to write using an easy-to-read, easy-to-write plain text format that could be converted to structurally valid HTML. The name "Markdown" is a play on HTML's "markup." Today Markdown is used everywhere: GitHub READMEs, documentation sites (GitBook, Docusaurus, MkDocs), blogging platforms (Ghost, Jekyll, Hugo), note-taking apps (Obsidian, Notion, Bear), and messaging apps (Slack, Discord). There are several variants: CommonMark (standardized spec), GitHub Flavored Markdown (GFM, adds tables and task lists), and MultiMarkdown (adds tables, footnotes, math).
Core syntax:
# H1 through ###### H6 for headings. **bold** or __bold__ for bold. *italic* or _italic_ for italics. ~~strikethrough~~. `inline code`. ```code block``` (fenced). [link text](url) for links.  for images. - item or * item for unordered lists. 1. item for ordered lists. > text for blockquotes. --- for horizontal rules. GFM additions: | col1 | col2 | for tables. - [x] done and - [ ] todo for task lists. ~~strikethrough~~. Autolinks for bare URLs.GitHub Flavored Markdown (GFM) is a superset of CommonMark created by GitHub and used in all GitHub content: READMEs, issues, pull requests, and comments. GFM adds: Tables with
| pipe syntax. Task lists with - [x] and - [ ]. Strikethrough with ~~text~~. Autolinks (bare URLs become clickable). Disallowed raw HTML (GitHub sanitizes certain HTML tags for security). GFM is now the de facto standard for Markdown on the web. This converter supports GFM tables, task lists, strikethrough and bare URL autolinks; raw HTML is shown as text instead of being rendered. Enable "GFM Tables" and "Task Lists" options above to control these features.Markdown tables use pipe characters (
|) to separate columns and hyphens (-) for the header separator row. Example: | Name | Age | City | / | --- | --- | --- | / | Alice | 30 | New York |. Column alignment: :--- left-align, ---: right-align, :---: centre-align. The cells don't have to be perfectly aligned: the pipes just need to be present. Tables are a GFM extension; they are not part of the original Markdown spec. They render as HTML <table> elements. If your Markdown processor doesn't support tables, enable the GFM Tables option above.Inline code uses single backticks:
`code`, renders as <code> within a paragraph, useful for variable names, file paths, and short snippets. Fenced code blocks use triple backticks or tildes on their own lines: ``` ```javascript ```, renders as <pre><code class="language-javascript">. Indented code blocks (4 spaces or 1 tab) are the original Markdown spec method and are still supported. Fenced blocks are preferred because they support language hints for syntax highlighting (used by Prism.js, Highlight.js). The language identifier after the opening ``` is preserved as a CSS class in the output HTML.Links:
[link text](https://example.com) or [link text](https://example.com "Optional title"). Reference-style links: [link text][ref] and then separately [ref]: https://example.com. Autolinks (GFM): bare URLs like https://example.com become clickable. Images follow the same syntax as links but with a leading exclamation mark:  or . Alt text is important for accessibility. Images render as <img src="..." alt="..."> in HTML. Note: the alt text should describe the image content, not just say "image."Yes. All conversion happens in your browser using JavaScript. No Markdown or HTML is sent to any server. The page works offline once loaded. We have no access to or logs of what you type. Raw HTML in your Markdown is shown as text, never rendered, and links are limited to safe schemes (http, https, mailto, tel, ftp and relative paths), so nothing in the preview can run a script. Other Markdown processors usually pass raw HTML through, so the same Markdown may behave differently elsewhere. Review the HTML output before embedding it in a production application. For user-generated Markdown, always sanitize the output using a library like DOMPurify before rendering.
The most popular Markdown-based static site generators: Jekyll (Ruby, used by GitHub Pages, oldest and most widely used). Hugo (Go, extremely fast, large sites in seconds). Gatsby (React + GraphQL, great for apps with dynamic features). Next.js (React, supports Markdown via MDX or gray-matter). Docusaurus (React, built by Meta for documentation sites). Astro (modern, multi-framework, excellent performance). MkDocs (Python, ideal for technical documentation). Eleventy (11ty) (flexible, multiple template languages). Most use CommonMark or GFM, with frontmatter (YAML metadata between
--- delimiters) for page configuration.MDX is Markdown for the component era. It lets you use JSX (React components) directly in Markdown files. In a
.mdx file you can write regular Markdown and also import and use React components: import Chart from './Chart' and then <Chart data={data} /> inline. This is powerful for documentation sites that need interactive demos, live code editors, or custom UI components embedded within written content. MDX is used by Docusaurus, Gatsby, Next.js, and Astro. It is compiled (not interpreted) so it is not suitable for user-generated content. This converter handles standard Markdown; for MDX you need a build tool like Next.js with @next/mdx.Several tools convert HTML back to Markdown. In JavaScript: the
turndown library (npm install turndown) converts HTML DOM nodes or HTML strings to Markdown. In Python: markdownify (pip install markdownify) does the same. In Pandoc (command line): pandoc -f html -t markdown input.html -o output.md, Pandoc is the most powerful document converter available and handles complex HTML well. Online tools like Turndown's demo page also provide this. Note that the conversion is lossy: complex HTML with custom classes, inline styles, and non-semantic tags does not map cleanly to Markdown and some formatting will be lost or simplified.No. CommonMark allows it, but this converter shows HTML tags as plain text so nothing in the preview can run a script. Links and images are also limited to safe URL schemes. If you need an HTML element, add it to the converted output after you copy it.
The nested item has to start at least where the parent item's text starts. For
- Parent that is 2 spaces, for 1. Parent it is 3 spaces. With fewer spaces the line becomes a new item of the outer list. Tabs count as 4 spaces.