Markdown を HTML へ
Markdown をきれいな HTML に変換 — リアルタイム並列プレビュー付き。
このツールについて
ブラウザ内でCommonMark構文を解析するフル機能のMarkdown-to-HTMLコンバーターです。ソースモードとレンダリングプレビューモードを切り替え、見出しから目次を自動生成し、生のHTMLをコピーするか完全なスタンドアロンの.htmlファイルをダウンロードできます。見出し、太字、斜体、コードブロック、引用、テーブル、リストをサポートしています。
使い方
- 1 ステップ1:左側のエディターにMarkdownコンテンツを入力またはペーストしてください。
- 2 ステップ2:「プレビュー」タブに切り替えてレンダリング結果を確認するか、「HTMLソース」タブで生のHTMLを確認してください。
- 3 ステップ3:「目次を生成」をクリックして、自動リンク付きの目次を先頭に挿入してください。
- 4 ステップ4:「HTMLをコピー」を使用してスニペットをコピーするか、「.htmlをダウンロード」で完全なスタンドアロンページを取得してください。
A Markdown converter built for full documents, not just snippets
Plenty of converters handle headings, bold, and links — the basics. This one is built for the parts of Markdown that real documentation needs: pipe tables, fenced code blocks with language labels, blockquotes, ordered and unordered lists, automatic heading IDs, and a one-click table of contents. It is a three-tab workspace — Editor, Preview, and HTML Source — plus the ability to copy the generated HTML or download a complete, self-styled .html page. If your goal is to turn a structured technical document into clean HTML, this is the heavier-duty tool.
What it parses that lighter converters skip
| Markdown | Becomes |
|---|---|
\| col \| col \| with a \|---\|---\| row under it | A real <table> with header and body |
| Triple-backtick fence with a language | A <pre><code class="language-…"> block |
> quoted text | A <blockquote> (parsed recursively, so it can contain its own formatting) |
1. first | An ordered <ol> list, not just bullets |
## Heading | A heading with an auto-generated id so it can be linked |
***text*** / ~~text~~ | Bold-italic / strikethrough |
Tables are the standout. A line with pipes followed immediately by a divider row like |---|---| is recognised as a table header; the rows beneath it become table cells until a blank line. Many minimal converters render that as literal text with visible pipe characters — this one builds the actual table structure.
A worked example with a table and code
The editor loads a sample document. Type a fenced block and a table such as:
## Config```json{ "retries": 3 }```| Setting | Default ||---------|---------|| retries | 3 |
Switch to the Preview tab and the JSON appears in a monospace code block while the table renders with a header row and bordered cells. Switch to HTML Source and you see the exact tags produced — a <pre><code class="language-json"> for the code and a full <table> with <thead> and <tbody> — ready to copy.
Automatic IDs and the table of contents
Because every heading is given a slug-based id as it is parsed (so ## Getting Started becomes id="getting-started"), the tool can build a linked table of contents on demand. Click Generate TOC and it scans the headings, nests them by level, and prepends a navigation block of anchor links to the HTML output. That is something the lighter Markdown tools on this site do not offer — it makes long pages navigable with in-page jump links the moment you export them.
Getting clean output: copy or download a full page
Copy HTML places the rendered markup on your clipboard for pasting into a CMS or template. Download .html goes further: it wraps your content in a complete HTML5 document with a sensible built-in stylesheet — readable body font, styled tables with borders, formatted code blocks and blockquotes, constrained images — and saves it as document.html. That file opens and looks good on its own, with no external CSS, so it is a genuine standalone page rather than a bare fragment.
A note on safety
The parser escapes &, <, and > in your content so pasted HTML shows as text rather than executing, and it sanitises link and image URLs — only allowing safe schemes like https:, mailto:, anchors, and relative paths, while neutralising things like javascript: URLs. So a malicious link in pasted Markdown will not produce a dangerous anchor in the output.
Common mistakes and tips
- Forgetting the table divider row. The second line must be the
|---|---|separator, directly under the header. Without it, the pipes render as plain text. - Closing your code fences. Every opening triple-backtick needs a matching closing fence, or the rest of the document is swallowed into the code block.
- Blank lines between blocks. Separate a paragraph, a list, and a table with blank lines so each is parsed as its own block.
- The language label is cosmetic. Writing
```pythonadds alanguage-pythonclass but does not syntax-highlight — pair the output with a highlighter library on your own page if you want colours. - Generate the TOC last. It reads the headings from the current document, so add or rename headings before clicking it, then regenerate.
Everything runs locally in your browser with a self-contained parser — no libraries, no server round-trip — so your document never leaves your device and conversion is instant, even offline.