HTMLからMarkdownへのコンバータ

HTML から Markdown への変換が実際に行うこと

HTML から Markdown 変換器は HTML スニペットを解析、結果の DOM ツリーを歩き、認識する各要素に対して Markdown 構文を出力します。<h1> は # になり、<strong> は **bold** になり、<a href="..."> は [text](url) になり、<ul><li> はバレットリストになります。ツールは JavaScript を介して完全にブラウザで実行されます:左側に HTML を貼り付け、Markdown に変換をクリック、フォーマットされた出力が右側に現れます。アップロードなし、サーバーラウンドトリップなし、テレメトリなし、Convert をクリックする間に DevTools の Network タブを確認するか、ロード後にページをオフライン(機内モード)にしても変換器はまだ動作します。この実装は HTML を読むためにブラウザの組み込み DOMParser を使用し、それから小さな再帰的トラバーサルが各ノードに Markdown を出力します。これは Turndown のラッパーではなく、約 150 行の手書き変換器です、つまり一般的なケースをきれいにカバーしますが、Turndown の完全な設定可能性とは一致しません。

この変換が実際に必要なとき

逆方向(Markdown から HTML)はより一般的に知られています、すべての静的サイトジェネレーターとライティングツールがそれを行います。順方向(HTML から Markdown)はあまり明白ではありませんが、ライティングツールエコシステムが分極化したのでますます一般的です:HTML は Web のアンビエントフォーマット(すべての CMS、ニュースレタープラットフォーム、CRM テンプレート、古い静的サイトが HTML を出力または保存)、Markdown は2014年頃から登場した現代のドキュメント、ノートテイキング、バージョン管理コンテンツワークフローのネイティブフォーマット。4 つの実際のワークフローがこの変換ニーズを生成します。

• ノートテイキングアプリのための記事クリッピング。 Web 記事を Obsidian、Notion、Logseq、Roam に保存、すべてのノートを Markdown 形式で保存します。Obsidian の公式 Web Clipper(2024 年リリース)と人気のブラウザ拡張機能 MarkDownload はこのスキーマに従います、Mozilla の Readability ライブラリで記事 DOM を抽出、Markdown に変換、ディスクに保存。拡張機能経由で基礎となる HTML に到達できないとき(ペイウォール後のコンテンツ、埋め込みリーダー、メールで受信したコンテンツ)、レンダリングされたテキストをコピー、結果の HTML を変換器に貼り付け、Markdown を保存します。
• Markdown ファースト SSG への CMS 移行。 WordPress、Confluence、Drupal、Mediawiki、Movable Type から MkDocs(Tom Christie、Python)、Docusaurus(Meta、React)、Hugo(Steve Francia、Go)、Jekyll(Tom Preston-Werner、Ruby、依然として GitHub Pages のエンジン)、Eleventy(Zach Leatherman、Node)、VitePress(Evan You、Vue)、または Sphinx-with-MyST にドキュメントを移動。すべてネイティブに Markdown、既存の CMS コンテンツは HTML としてエクスポートされ大量変換されなければなりません。
• WYSIWYG エディタからのポータブル Markdown への出力。 ライターが Google Docs、Word、Apple Notes、Evernote、または CMS のリッチテキストエディタを使用、クリップボードペイロードは HTML です。彼らは Git にコミットする、Markdown エディタに貼り付ける、開発者に送信する、ドキュメントサイトに含めるためのクリーンな Markdown が欲しい。Microsoft Word の「Web ページとして保存」機能は悪名高く密集した HTML を生成します、XML 名前空間、mso- プレフィックス CSS、Office 固有タグでいっぱい、理解しないものを無視してクリーンな Markdown を出力する変換器はまさに正しいクリーンアップツールです。
• アーカイブする電子メールコンテンツ。 ニュースレタープラットフォーム(Substack、Kit/ConvertKit、Beehiiv、Mailchimp)はすべてフォーマットされた HTML を送信します。Markdown でリファレンスを保管する読者は電子メール本文ソースを表示、HTML を変換器に貼り付け、結果をノートにファイルできます。

リファレンス実装、Turndown とそのファミリー

Turndown(Dom Christie)は支配的な HTML から Markdown JavaScript ライブラリです、2012 年に to-markdown として始まり、2017 年にフォークと区別するために Turndown に名前変更され、MIT ライセンスで npm に turndown として公開されています。その設計はルールベースです:各ルールは filter(適用される DOM ノード)と replacement(Markdown を生成する関数)を持ちます。コンストラクタは見出しスタイル(atx # vs setext ===)、バレットマーカー(-、+、または *)、コードブロックスタイル(インデント vs フェンス)、emphasis 区切り文字(* vs _)、bold 区切り文字(** vs __)、リンクスタイル(インライン vs 参照)などのオプションを受け入れます。テーブル、取り消し線、チェックリストアイテム、autolink は別個のパッケージ turndown-plugin-gfm に住みます。markdownify(Matthew Tretter)は Python 等価物です、スクレイピングパイプライン、Jupyter ノートブック変換、LangChain ドキュメントローダー、LLM データセット準備で広く使用されます。html2text(元々 Aaron Swartz による、John Gruber と一緒に2004年の元の Markdown 設計でもコラボレーション)は古い Python オプションです、依然として歴史的な電子メールパイプラインで使用されますが、大部分が置き換えられました。html-to-markdown(Johannes Kaufmann)はスタンドアロンスクレイピングバイナリのために人気のある Turndown の Go ポートです。Pandoc(John MacFarlane、CommonMark プロジェクトの議長)は普遍的なドキュメント変換器です、グリッドテーブル経由のマージセルテーブル、数学、引用、脚注、定義リストを処理し、数十のフォーマット間で変換します。Pandoc は利用可能な最も完全な HTML から Markdown ツールですが、インストールされなければならない 60 MB を超える Haskell バイナリで、ブラウザで実行されません。

基本的なトレードオフ、HTML は Markdown より豊か

あらゆる HTML から Markdown 変換は必然的に非可逆です、ソースフォーマットがターゲットフォーマットが言えないことを表現するからです。インラインスタイル(<span style="color:red">)は Markdown 文法を持ちません、Markdown の emphasis 語彙は厳密に bold/italic/strikethrough/code に制限されます、任意の色、フォント、またはサイズの構文はありません。CSS クラス(<div class="alert">)はスタイルシートには意味を持ちますが Markdown には持ちません。カスタムデータ属性(data-track-event="...")はページの JavaScript 契約の一部で、ドキュメントの一部ではありません。マージセルテーブル(colspan、rowspan)は GFM パイプテーブルで表現できません。埋め込みメディア(<video>、<audio>、<iframe>)とフォームコントロールは Markdown 等価物を持ちません。折りたたみ可能 <details><summary> パネル、<figure><figcaption>、CJK 発音のための <ruby> 注釈、microdata と microformat、これらは何も変換を生き残りません。サポートされていない各構造に対して、変換器の著者は 3 つの戦略のいずれかを選択します:翻訳(情報を失う Markdown 近似に)、通過(Markdown に埋め込まれた生の HTML として、Markdown は仕様によりこれを許可、CommonMark のセクション 4.6 と 6.6 がそれをカバー)、または完全に削除。この実装は「マッピングが明確な場所で翻訳、そうでなければ透過的にラップ(子をレンダリング、タグを削除)」を選択、予測可能で推論しやすいデフォルト、高度な設定可能性のコストで一般的なケースを処理します。

標準マッピング

• 見出し: <h1>-<h6> は # から ######(atx スタイル)にマップ。古い setext 形式(=== と --- による下線)は h1 と h2 に対しても有効ですが、2026 年にはあまり使用されません。
• 段落: <p> は空行で囲まれたプレーンテキストになります。Markdown の段落区切りは 1 つ以上の空行です。
• Emphasis: <strong> と <b> は **bold** になります。<em> と <i> は *italic* になります。<del> と <s> は ~~strikethrough~~ になります(GFM 拡張、CommonMark 自体ではない)。
• リンク: <a href="url">text</a> は [text](url) になります。参照リンク形式([text][1] と下部の [1]: url)も有効な Markdown です。
• 画像: <img src="url" alt="text"> は ![text](url) になります。感嘆符は画像をリンクから区別します。
• コード: <code> はインラインバッククォートスパンになります。<pre><code> は三重バッククォートフェンスブロックになります。この実装はインラインコードスパンが内容にバッククォートを含むときより長い囲いを使用するという CommonMark 要件を正しく処理します(CommonMark §6.1 仕様規則ごと)。
• リスト: <ul> は - バレット行になり、<ol> は 1.、2.... 番号付き行になります。CommonMark はあらゆる開始番号を受け入れます、レンダラーは正規化します。
• 引用: <blockquote> は子の各行に > をプレフィックスします。
• 水平線: <hr> は独自の行で --- になります。*** と ___ も有効です。
• 改行: <br> は line break になります。CommonMark はまた行末の 2 つのスペースまたは行末のバックスラッシュを受け入れます。
• テーブル: <table> は GFM パイプテーブルになります、ヘッダー行、--- 区切り行、本文行。GFM 拡張、CommonMark コアではない。

正直な範囲、このツールが行うことと行わないこと

知っておくべき 3 つの正直な制限。(1)インラインスタイルと CSS クラスは削除されます。 <span style="color:red"> はスタイルなしのテキストになります、<p class="lede"> はクラスを失います。任意のインラインスタイリングのための Markdown 文法はありません。(2)マージセルテーブルはフラット化されます。 GFM パイプテーブルは colspan や rowspan の構文を持ちません、マージ情報は静かに失われます。複雑なテーブルには、Markdown 内に HTML としてソースを保持(CommonMark は埋め込み HTML を許可)するか、グリッドテーブル出力で Pandoc を使用してください。(3)コードブロックは言語ヒントなしで出力されます。 HTML が <pre><code class="language-js"> を含む場合、言語属性は現在削除されます、出力は言語なしのフェンスブロックです。ターゲットレンダラーがシンタックスハイライトをサポートする場合、開きバッククォート後に手動で言語識別子を追加できます。より広い警告: Web ページの完全な HTML(「ソースを表示」から)を貼り付ける場合、<script> と <style> コンテンツがプレーンテキストとして出力されます、それはほぼ確実に望むことではありません。修正:記事コンテンツのみを貼り付ける、レンダリングされたビュー(自動的にスクリプトとスタイルを刈り取る)からコピーする、または変換前に DOMPurify などで HTML をクリーンアップしてください。

2026 年の Markdown の状態

Markdown は2026 年に 22 歳になりました。John Gruber は2004 年に元の Perl スクリプトを公開、Aaron Swartz が設計協力者として。テーブルは Gruber のオリジナルから意図的に省かれました、今日ほとんどの読者になじみのあるパイプテーブル構文は後の方言、特に GitHub Flavored Markdown から来ています。CommonMark、Jeff Atwood と John MacFarlane が2014年に組織した厳密な仕様努力、は今やバージョン 0.31.2(2024年1月28日)、ほとんどの現代のパーサーがターゲットにする方言です。GitHub Flavored Markdown(GFM、2019年4月6日にバージョン 0.29-gfm として正式化)はテーブル、タスクリスト、取り消し線、autolink、生の HTML 禁止ルールを追加する GFM スーパーセットです。GFM は GitHub の規模のためにほとんどのユーザーが Web で実際に見る方言です。Markdown は今やほぼあらゆる開発者ドキュメントエコシステムのネイティブフォーマットです、HTML は Web の普遍的な出力フォーマットのままです、両者間の変換は逆と同じくらい一般的で、ブラウザで、インストールなしで、データがデバイスを離れることなく、緊急に必要な瞬間に存在します。

プライバシー、なぜブラウザのみがここで重要か

変換器に貼り付けられた HTML は元のソースの痕跡をしばしば含みます、内部 CMS markup、未公開のドラフトコンテンツ、電子メールテンプレート内のクライアントデータ、内部サイト構造を明らかにするリンク URL、プライベートアセットサーバーを指す画像参照。サーバー側変換器はこれらすべてをサードパーティサービスにアップロードします。このツールは JavaScript を介してブラウザで完全に実行されます:貼り付けた HTML はネットワークを横断しません、Convert をクリックする間に DevTools の Network タブを確認するか、ロード後にページをオフライン(機内モード)にしても変換器はまだ動作します。未公開のドラフト、クライアント電子メールテンプレート、内部ドキュメント抜粋、または見知らぬ人のハードドライブにコピーされたくないあらゆる HTML に安全です。

よくある質問

大きなファイルで動作しますか?

はい、変換がブラウザで実行されるので、実用的な上限はデバイスの利用可能なメモリです。何万行もの行が現代のラップトップで 1 秒未満で変換されます。非常に大きな入力(数百万ノード)は DOM トラバーサル再帰中にタブを短時間フリーズさせるかもしれません。完全な CMS エクスポートのバッチ変換には、Node の Turndown または Python の markdownify を使用するスクリプトが最良のツールです。

インラインスタイルと CSS クラスはどうなりますか?

それらは完全に削除されます。Markdown の emphasis 文法は bold、italic、strikethrough、code をカバーします、任意の色、フォント、サイズ、またはクラス駆動スタイリングの構文はありません。視覚スタイリングが出力で重要な場合、オリジナルを HTML として保持するか、AsciiDoc、reStructuredText、または MDX(Markdown プラス JSX コンポーネント、Docusaurus が使用)のようなより豊かなターゲットフォーマットを使用してください。このツールが構築された記事アーカイブと CMS 移行ケースには、スタイルを削除することが正しい動作です、Markdown の全ポイントは視覚ノイズを削除して構造のみを保持することです。

このツールはオフラインで動作しますか?

はい、ページがロードされると、変換は JavaScript を介してブラウザで完全に実行されます。変換中のネットワーク呼び出しはありません。Convert をクリックする間に DevTools の Network タブを確認するか、ページがロードされた後にデバイスをオフライン(機内モード)にしてもツールはまだ動作します。

これは Turndown ですか?

いいえ。Turndown(Dom Christie のライブラリ)は JavaScript リファレンス実装で、Node プロジェクトで自然に選ぶツールですが、見出しスタイル、バレットマーカー、リンクスタイル、コードブロックスタイルなどの完全な設定可能性を持つ実質的な依存関係です。このブラウザ内ツールはより小さな手書きの DOM トラバーサルです、約 150 行、設定サーフェスなしで一般的なケース(見出し、段落、emphasis、リンク、画像、リスト、引用、フェンスコード、基本テーブル)をターゲットにします。このサイトが構築されたフロー(ブラウザ内のワンオフ変換、インストールなし)には、より小さな実装が正しい形式です、設定可能なルールを必要とする本番スクレイピングパイプラインには、Turndown が依然として正しい選択です。

テーブルはどう扱われますか?

GFM パイプテーブルとして:1 つのヘッダー行、ダッシュ区切り行、<tr> ごとに 1 つの本文行。パイプテーブルはフラットで、colspan、rowspan、複数行セルコンテンツ、セル内のリスト、またはセルごとのアラインメントを表現できません。HTML テーブルがこれらの機能のいずれかを使用する場合、この変換器は追加の構造を失う劣化したパイプテーブルを生成します。複雑なテーブルには、2 つの実用的なオプション:(a)Markdown 内に生 HTML としてテーブルを保持(CommonMark は埋め込み HTML を許可)、ターゲットレンダラーがそれを通すと信頼、(b)マージセルを表現できるグリッドテーブル出力で Pandoc を使用。

Web ページの完全な HTML を貼り付けることができますか?

できますが、おそらくすべきではありません。現代の Web ページの完全なソースは JavaScript コードを持つ <script> タグ、CSS を持つ <style> ブロック、追跡ピクセル、広告 markup、CMS テンプレートコメントを含みます。この変換器はスクリプトとスタイルコンテンツを明示的に刈り取りません、つまりすべてが Markdown 出力でプレーンテキストとして終わります。クリーンなアプローチ:DevTools で記事要素のみを選択(記事を右クリック、「検査」、それから Elements パネルで対応するノードを右クリックして「outerHTML をコピー」)、または貼り付け前にコンテンツ抽出ステップ(Mozilla の Readability ライブラリ、または Firefox の Reader Mode のパッケージ化された形式)を使用してください。自動的に抽出ステップをサポートするブラウザ拡張ベースのフローには、Obsidian Web Clipper や MarkDownload を参照してください。

関連ツール