変換 HTML → Markdown
HTML を Markdown に変換する
ブログのエクスポートやリッチエディタの出力を Markdown に変換する方法です。可逆性の限界も解説します。
解説
HTML を Markdown に変換するときの課題は、Markdown では表現できない HTML 要素の扱いです。 h1〜h6 / p / ul / ol / blockquote / code / pre / strong / em / a / img などの基本要素は対応する Markdown 記法に置き換えられます。一方、class 付き <div> や style 付き <span>、複雑な <table>、<iframe> などは書式がないので、HTML のまま残すか除去するかを選びます。Node.js では Turndown が定番です。
サンプル入力（HTML）
<h1>見出し</h1>
<p>本文です。<strong>強調</strong> と <em>斜体</em> も使えます。</p>
<ul>
<li>リスト 1</li>
<li>リスト 2</li>
</ul>サンプル出力（Markdown）
# 見出し
本文です。**強調** と *斜体* も使えます。
- リスト 1
- リスト 2使うときのコツ
- · table や custom HTML 要素はそのまま HTML として残すオプションを使うと情報が失われない
- · リッチエディタ（Quill 等）の HTML には不要な span / style が大量に混入する。事前にクリーニング（DOMPurify 等）すると綺麗
- · リンクのタイトル属性 `<a title="...">` は Markdown では `[text](url "title")` で保持可能
よくある質問
▶ 完全可逆な変換はできる？
できません。Markdown は HTML のサブセットなので、HTML 固有の class / style / 属性などは Markdown では表現できません。可逆性が必要なら HTML のまま保存してください。
▶ table はどう変換される？
GFM のパイプ表記（| 列 | 列 |）に変換できます。複雑なテーブル（rowspan / colspan）は表現できないので、HTML のまま保持される設定が安全です。
▶ Turndown 以外の選択肢は？
Python なら html2text、Ruby なら reverse_markdown、Go なら html-to-markdown が代表的です。挙動が微妙に違うので、変換後の Markdown を目視確認するのを推奨します。
▶ Markdown に変換すると装飾が失われる
それが Markdown の特性です。装飾を残したいなら HTML のまま運用するか、CSS クラスを Markdown 用拡張記法（{.class}）に対応するパーサを使ってください。
▶ WordPress の記事を Markdown 化したい
WordPress エクスポート XML から HTML を抽出 → Turndown で Markdown 化、というフローが一般的です。Hugo / Jekyll への移行で多用されます。
▶ WYSIWYG エディタの HTML が汚い
div / span / style 属性が大量に挿入されることがあります。変換前に sanitize-html などで属性を制限すると、Markdown が読みやすくなります。
関連ツール
文字数カウンター
文字数 / 単語数 / 行数 / バイト数を即時カウントします。