HTML Markdown 変換ツール：HTMLをMarkdownに、MarkdownをHTMLに

この変換ツールでできること

HTML は Web ページを作るための言語です。Markdown は、同じ構造を普通の文字でもっと手軽に書く方法です。見出しは #、リストの項目は -、太字は ** で書きます。この2つの間の変換はよく行われます。CMS のブログ記事を静的サイトに移したり、Web ページの内容を README に貼り付けたり、Markdown で書いたメモをメールテンプレート用の HTML にしたりする場面です。

このページはどちらの向きにも変換できます。HTML から Markdown への変換には、広く使われている変換ライブラリ Turndown に、表とコードブロック用の独自ルールを加えて使っています。Markdown から HTML への変換には、GitHub Flavored Markdown を有効にした marked を使っています。

使い方

HTML から Markdown または Markdown から HTML で、変換の向きを選びます。
左のボックスに貼り付けるか、ファイルを開く を押すか、サンプル で試します。入力に合わせて結果が更新されます。
HTML から Markdown の場合は、見出し のスタイル（# 記号か下線）、箇条書きの記号、コードブロック の書き方（フェンスかインデント）を選びます。
Markdown から HTML の場合、GitHub のコメントのように1回の改行もそのまま改行として残したいなら、改行を   にする をオンにします。
コード と プレビュー を切り替えて表示結果を確認し、コピー または ダウンロード します。

HTML から Markdown への変換例

この HTML は

<h1>Release notes</h1>
<p>Version <strong>2.4</strong> adds <a href="https://example.com/docs">offline mode</a> and fixes <em>three</em> bugs.</p>
<ul>
  <li>Faster search</li>
  <li>New <code>--quiet</code> flag</li>
</ul>
<pre><code class="language-bash">npm install [email protected]</code></pre>
<table>
  <tr><th>Platform</th><th>Status</th></tr>
  <tr><td>Windows</td><td>Ready</td></tr>
</table>

次の Markdown になります。

# Release notes

Version **2.4** adds [offline mode](https://example.com/docs) and fixes *three* bugs.

- Faster search
- New `--quiet` flag

```bash
npm install [email protected]
```

| Platform | Status |
| --- | --- |
| Windows | Ready |

コードブロックの language-bash クラスは、開始フェンスの後ろの言語名に変わるので、GitHub やほとんどの静的サイトジェネレーターで構文のハイライトがそのまま使えます。入れ子のリストは親の項目の下にインデントされ、番号付きリストは番号が保たれます。

Markdown から HTML への変換例

この Markdown は

## Install

Run `npm install` and open **http://localhost:3000**.

- [x] Node 20
- [ ] Docker

次の HTML になります。

<h2>Install</h2>
<p>Run <code>npm install</code> and open <strong><a href="http://localhost:3000">http://localhost:3000</a></strong>.</p>
<ul>
<li><input checked="" disabled="" type="checkbox"> Node 20</li>
<li><input disabled="" type="checkbox"> Docker</li>
</ul>

ここでは GitHub の拡張機能が2つ働いています。むき出しの URL がリンクになり、タスクリストの項目がチェックボックスになりました。区切り行に :-: がある表では、セルに align="center" が付きます。

初期設定では、段落内の1回の改行はソース上の普通の改行のまま残り、ブラウザではスペースとして表示されます。改行を   にする をオンにすると、別々の行にある Line one と Line two は Line one Line two になります。日本語の文章では改行がスペースとして表示されると不自然に見えることがあるので、1行ずつ改行を残したい場合はこのオプションをオンにしてください。

削除されるもの

Markdown が表すのは構造で、デザインではありません。HTML から Markdown に変換するときは、次のようになります。

script、style、noscript、template のブロックは削除されます。
クラス、id、インラインスタイル、data 属性は取り除かれます。
div や span のような囲み要素はなくなりますが、中のテキストは残ります。
複数の段落を含む表のセルは1行にまとめられます。Markdown の表の行は1行に収める必要があるためです。セル内のパイプ記号は \| とエスケープされます。
結合されたセル（colspan）は空のセルで埋められ、すべての行の列数がそろいます。

レイアウトを正確に保ちたい場合は、内容を HTML のまま残してください。ほとんどの Markdown レンダラーは、生の HTML ブロックを書くことを認めています。

ヒント

できれば、表示されたページではなくページのソースからコピーしてください。表示されたテキストをコピーすると、変換に必要なタグが失われます。
HTML が圧縮されていたり乱れていたりしても、結果は同じです。このツールは空白ではなく構造を読むからです。HTML そのものを読みたい場合は、先に HTML整形ツールにかけてください。
変換後の Markdown を Markdown整形ツールにかけると、表の列がそろい、強調の書き方も統一されます。
Word 文書には、.docx ファイルを直接読み込む Word Markdown 変換ツールを使ってください。

ほかの変換方法

Pandoc はコマンドラインで数十種類の形式を相互に変換できます。基本の形は pandoc page.html -o page.md です。
エディタ：VS Code では Ctrl+Shift+V で Markdown のプレビューを表示できます。HTML を Markdown として貼り付けるコマンドを追加する拡張機能もいくつかあります。
コード：JavaScript の Turndown ライブラリや Python の markdownify パッケージを使えば、自分のスクリプトの中で HTML を Markdown に変換できます。

このページの処理はすべてブラウザ内で行われます。貼り付けた HTML は実行されない文書として解析されるので、変換中にその中のものが実行されたり読み込まれたりすることはありません。

HTML Markdown 変換のよくある質問

ここで Markdown を HTML に戻すこともできますか？

はい。ボックスの上にある「Markdown から HTML」を押してください。GitHub 形式の表、タスクリスト、取り消し線に対応しています。変換した後に向きを切り替えると、今の結果が入力欄に移るので、行ったり来たり変換できます。

よそからコピーした HTML をプレビューしても安全ですか？

はい。プレビューはサンドボックス化されたフレームです。スクリプトは実行されず、ネットワークから何も読み込まれず、リンクも開きません。そのため外部の画像はプレビューに表示されませんが、Markdown や HTML の出力には残っています。

スクリプト、スタイル、クラスはどうなりますか？

Markdown には入れる場所がないため、script と style のブロックは削除されます。クラス、id、インラインスタイルも取り除かれます。残るのはテキストと構造です：見出し、段落、リスト、リンク、画像、強調、コード、表。

見出し行がない表でも Markdown の表になるのはなぜですか？

Markdown の表には見出し行が必要です。HTML の表に見出し行がない場合、このツールは最初の行を見出しとして使うので、HTML のまま残ることなく Markdown の表になります。