Markdown は、プレーンな文字で整形済みテキストを書けます——# は見出し、- は箇条書き、**太字** は強調。HTML はブラウザが実際にレンダリングするタグ付きマークアップです。Markdown を HTML に変換するとは、この省略記法を <h1>・<ul>・<strong> に変えること。逆方向は、雑然とした HTML をきれいな Markdown に戻すことです。
Markdown は何になるか
| Markdown | HTML |
|---|---|
# タイトル | <h1>タイトル</h1> |
- 項目 | <ul><li>項目</li></ul> |
**太字** | <strong>太字</strong> |
[テキスト](url) | <a href="url">テキスト</a> |
```コード``` | <pre><code>コード</code></pre> |
変換器は Markdown を順にたどり、対応するタグを出力します。多くのツールは GitHub Flavored Markdown に従い、元の仕様に加えて表・タスクリスト・フェンス付きコードブロックをサポートします。
Markdown を HTML に
最も一般的な方向です:README やブログ記事を Markdown で書き、ページ・メール・CMS に貼る HTML が必要な場合。Markdown を貼り付け、変換し、HTML をコピーします。付属のプレビューで、使う前に整形が正しいか確認できます。
HTML を Markdown に
逆方向は片付けに便利です。Web ページから一部をコピーすると <div> やインラインスタイルの塊として届きますが、Markdown に変換すれば、メモや文書に本当に必要な言葉と構造だけになります。HTML 固有の要素(インライン CSS、複雑な入れ子の表)は Markdown で表現できないことがあり、簡略化されます。
Markdown のよくある落とし穴
「なぜ描画されない?」の多くは、いくつかの習慣が原因です。
- リストの前には空行を。 段落のすぐ下にリストを続けると、多くのパーサーは同じ段落として扱います。まず 1 行空けましょう。
- 単一の改行は無視されがち。 Markdown は改行 1 つを空白に畳みます。強制改行したいときは行末に半角スペース 2 つ、または空行で新しい段落にします。
- 語中のアンダースコアが斜体を招くことがある。 一部の方言では
snake_case_nameの中央が斜体になります。バックティックで囲むか、snake\_case\_nameのようにエスケープを。 - 半角 4 つのインデントはコードブロックに。 意図しないインデントが、こっそりテキストを
<pre>出力に変えます。
よくある質問
Markdown に標準はある? 最も標準に近いのは CommonMark で、GitHub Flavored Markdown が表・タスクリスト・打ち消し線を追加しています。方言により差があり、あるサイトで動く脚注記法が別のサイトでは効かないこともあります。
Markdown の中に HTML を書ける? はい——多くのレンダラは生の HTML をそのまま通すため、Markdown で表せない <sub> や <details> に便利です。サニタイズするレンダラでは除去されることがあります。
出力に <html> や <body> は含まれる? いいえ。変換器が出すのは HTML の断片——<h1> や <p> などだけです。単体のページが必要なら自分で完全な文書に包んでください。はるかに厳格な規則を持つもう一つのマークアップ言語は、XML の解説をどうぞ。
ブラウザ内で、プライバシーを守って
Markdown ⇄ HTML 変換ツールは完全に端末上で動作し——アップロードなし——スクリプトを実行しないサンドボックスのライブプレビューでレイアウトを表示します。どちらの方向にも変換でき、プレビュー後にコピーまたはダウンロードできます。