Markdown を HTML へ
左側にMarkdownを入力すると、右側にリアルタイムでレンダリングされたHTMLが表示されます。
このツールについて
外部ライブラリなしでMarkdownをリアルタイムにレンダリングする分割ペインエディタです。組み込みパーサーは見出し、太字、斜体、取り消し線、リンク、画像、リスト、引用ブロック、コードブロック、テーブル、水平線をサポートしています。一般的な書式設定にはツールバーショートカットを使用し、レンダリングされたHTMLをコピーするかファイルを.mdとしてダウンロードできます。
使い方
- 1 ステップ1：左ペインにMarkdownテキストを入力または貼り付けてください — プレビューがリアルタイムで更新されます。
- 2 ステップ2：ツールバーボタン（H1、H2、太字、斜体、リンク、コード、引用、リスト、HR）を使用して書式を挿入してください。
- 3 ステップ3：エディタの下に表示される単語数と文字数を確認してください。
- 4 ステップ4：「HTMLをコピー」をクリックしてレンダリングされた出力をコピーするか、「.mdをダウンロード」をクリックしてMarkdownファイルを保存してください。
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.