Markdown 转 HTML
文字
关于此工具
在左侧编写Markdown，在右侧实时查看渲染后的HTML。
使用方法
- 1 分屏编辑器，随输入即时渲染Markdown，无需外部库。内置解析器支持标题、粗体、斜体、删除线、链接、图片、列表、引用、代码块、表格和水平线。使用工具栏快捷方式进行常用格式设置，然后复制渲染后的HTML或将文件下载为.md格式。
- 2 第1步：在左侧窗格中输入或粘贴Markdown文本——预览实时更新。
- 3 第2步：使用工具栏按钮（H1、H2、加粗、斜体、链接、代码、引用、列表、HR）插入格式。
- 4 第3步：查看编辑器下方显示的字数和字符数。
Writing with a live preview instead of guessing
This is a two-pane writing environment: you type Markdown on the left, and a fully rendered preview appears on the right, updating on every keystroke. The point is not just to convert Markdown once, but to give you a real editing experience — you see headings grow, bold text thicken, tables align, and code blocks format the instant you type them. That tight feedback loop is what separates a live editor from a one-shot converter: you write, glance right, and correct, all without ever leaving the page or pressing a "render" button.
What the editor renders as you type
The built-in Markdown parser handles a broad set of syntax, all live:
- Headings (
#through######), sized visually so the document structure is obvious in the preview; - Inline formatting:
**bold**,*italic*,***bold italic***, and~~strikethrough~~; - Links and images with the
[text](url)andsyntax; - Inline code with backticks and fenced code blocks with triple backticks, shown on a dark background;
- Tables using the pipe-and-dash syntax, rendered with borders;
- Blockquotes (
>), bullet lists, ordered lists, and horizontal rules (---).
This is a meaningfully richer feature set than a minimal converter — ordered lists, tables, and blockquotes all work here — making it suitable for drafting full documents, not just snippets.
The toolbar and keyboard help
Above the panes sits a formatting toolbar with twelve buttons: H1/H2/H3, bold, italic, strikethrough, link, inline code, blockquote, bullet list, numbered list, and horizontal rule. These are cursor-aware. If you select the word "important" and click B, it wraps the selection to produce **important**; if nothing is selected, it inserts the markers and places your cursor between them so you can keep typing. The editor also captures the Tab key and inserts two spaces instead of jumping focus away, so you can indent inside the textarea without losing your place — a small touch that matters when writing nested content or code.
A worked example
Start with an empty editor and type ## Shopping list then press Enter twice. As you type each character, the right pane shows the heading appearing and growing into a styled subheading. Now type - milk, Enter, - eggs: the preview renders a live bulleted list. Select "milk," click the bold button, and the source becomes - **milk** while the preview instantly bolds it. At the bottom of the editor a live counter reads something like 5 words · 41 chars, recalculated on every edit so you always know how long your draft is.
Getting your work out
Two export actions sit in the toolbar. Copy HTML places the rendered HTML of the preview onto your clipboard, ready to paste into a CMS, email template, or web page. Download .md saves your raw Markdown source as a document.md file so you can keep editing it later in any Markdown app. Together these cover the two things writers actually need: the finished HTML for publishing, and the portable source for safekeeping.
Practical tips
- Separate paragraphs with a blank line. Two lines of text with no gap between them are treated as part of the same block; an empty line creates the break.
- For a table, the second line must be the divider (e.g.
|---|---|) directly under the header row, or the lines render as plain text with visible pipes. - Use the toolbar to learn the syntax. Click a button, watch what it inserts on the left, and you will quickly remember the markup for next time.
- Watch the word count when writing to a length target — it updates live, no need to paste into a separate counter.
Common mistakes
- Expecting the preview's HTML to be minimal. "Copy HTML" copies the rendered markup including the styling the preview uses; if you need bare semantic tags, clean it up after pasting.
- Losing work on refresh. The editor holds your text in the page for the session; reloading resets it to the welcome document. Download your
.mdbefore closing the tab if the draft matters. - Forgetting the fence language is cosmetic. You can write
```jsto label a code block, but the editor renders it as a plain monospace block — it does not syntax-highlight by language.
Everything runs locally in your browser with a self-contained parser — no external libraries and no server round-trips — so your draft never leaves your device and the preview keeps up instantly even offline.