Home › Code and dev › Markdown to HTML
🔧

Markdown to HTML

Live Markdown to HTML with tables, task lists, fenced code, heading anchors and a table of contents, with copy and download

Markdown 编辑与预览
实时预览
编码

本工具只做 Markdown 到 HTML 的格式转换,不是 HTML 清理器;关闭「允许 HTML」时会转义尖括号与引号,开启后原始 HTML 会原样输出。默认按 CommonMark 规则解析,GFM 扩展覆盖表格、删除线、任务列表与裸链接自动链接。

字符 0 · 行 0 · HTML 0 字节

About this tool

Converting Markdown to HTML looks like a tag swap, but the trouble is in the rules: why a table did not render, why a line break inside a paragraph disappeared, whether angle brackets inside a code block need escaping, and how table of contents anchors line up with headings. This tool turns those rules into switches, shows a live preview on the right, and updates as you type on the left. The result can be copied or downloaded directly.

Supported syntax

  • Blocks: # through ###### headings and underlined headings with === or ---; paragraphs; fenced code blocks with three backticks or tildes, adding class="language-xxx" when a language is named; indented code blocks starting with four spaces; nested blockquotes; unordered lists with -, * or +; ordered lists with 1. or 1), preserving the start number as <ol start>; horizontal rules ---, *** and ___
  • List details: nesting follows indentation, a different marker starts a new list, and a blank line between items produces a loose list with items wrapped in <p>. GFM task checkboxes become disabled input elements and stay as text when GFM is off
  • Tables: a header plus a delimiter row is required. :---, ---: and :---: mean left, right and center, emitted as style="text-align:...". Short rows are padded, extra cells are reported and ignored, and a pipe inside a cell is escaped as \|
  • Inline: **bold**, *italic*, ***bold italic***, _italic_, ~~strike~~, and `code`, including runs of two or three backticks that wrap a backtick. Inline code wins over emphasis, so `*a*` is not italicized
  • Links and images: inline [text](url "title"), reference [text][label] with [label]: url, autolinks <https://…> and <mailto:…>, bare URL detection, and images ![alt](src)
  • Line breaks: two trailing spaces or a trailing backslash produce <br>. A normal newline joins the same paragraph unless soft break to br is enabled
  • Escapes: a backslash escapes characters such as \*, and unrecognized characters are emitted literally

Heading anchors and contents

  • Each heading gets a slug as its id: non-ASCII text is kept, punctuation is removed and spaces become hyphens. Duplicate headings get -1 and -2, so anchors never collide in a long document
  • With generate contents enabled, a nested <ul> is inserted before the body, matching heading levels and forming in-page navigation with the anchors
  • With heading anchors off, clean <h2> output is produced for systems that build their own contents

Raw HTML

  • Allow HTML is off by default: all angle brackets and quotes in the body are escaped, so <script> appears as text, which is safer for static blog posts and comment areas
  • When enabled, HTML blocks in the source pass through unchanged, which helps with structures Markdown cannot express, such as <details>, merged table cells or <img width>. Only enable it for content you wrote yourself
  • Angle brackets inside code blocks are always escaped, so pasted code is never parsed as tags

Copy and download

  • Copy HTML: paste the fragment into a template or a rich text source view
  • Copy escaped: escape <, >, & and " one more level, for documentation, tutorials, or embedding HTML inside HTML
  • Download .md or .html: the HTML file includes <meta charset>, and the encoding menu offers UTF-8 with BOM so Notepad or old browsers do not show garbled text
  • The body is stored locally, so a refresh or the next visit restores the last text and options

FAQ

  • Why did my table stay text? The three usual causes are a missing delimiter row below the header, GFM extensions turned off, or no blank line around the table so it is read as a paragraph. Missing delimiters or rows with more cells than the header are reported below the page
  • Why did a line break disappear? Markdown treats a single newline as a space. Leave two trailing spaces, add a trailing backslash, or insert a blank line for a new paragraph. Enabling soft break to br is the easiest fix
  • How is this different from the HTML formatter? This tool converts markup to tags. If the resulting HTML needs indentation and line alignment afterward, use the HTML formatter
  • Are footnotes, definition lists or syntax highlighting supported? No. Footnotes and definition lists are vendor extensions with no common implementation, and no highlighting library is bundled. Only class="language-x" is emitted for your site template to style
  • Is allowing HTML risky? Yes. Tags in your input pass straight into the result, and pasted content containing scripts would execute. If the goal is to strip someone else HTML down to text, leave the switch off
  • Is the content uploaded? No. Parsing, preview, copy and download all happen in the browser, the page sends no requests, and it works offline
  • Does a long document lag? Conversion is lightly debounced, so a document of tens of thousands of characters keeps up while typing. A summary line shows source characters, lines and the byte size of the generated HTML
  • What do the warnings do? Parse problems include a line number, for example an unclosed code fence is reported as running to the end with its position, instead of silently swallowing content

To tidy the resulting HTML, use the HTML formatter; to keep only the text, use strip HTML tags; to show markup as text in code, use HTML entity encode; to compare two revisions, use the text diff; to count characters and paragraphs, use the word counter.