HTML→Markdown変換
使い方
入力エリアにHTMLを貼り付けまたは入力してください。DOMを走査してリアルタイムでMarkdownが出力されます。見出し・段落・強調・リンク・画像・順序/非順序リスト(ネスト対応)・引用・言語ヒント付きコードブロック・水平線・表などの一般的な要素がすべてMarkdown相当に変換されます。コピーボタンで結果をそのまま貼り付け可能です。
HTMLからMarkdownに変換する理由
Markdownはコンパクトで可読性が高く、HTMLよりもレビュー・差分確認・手編集が容易なテキスト形式です。ブログを静的サイトジェネレーターに移行する時、GitHubのREADME用にコンテンツを準備する時、WYSIWYGエディタの出力をドキュメントリポジトリにコミットする前にクリーンアップする時、Webページのプレーンテキスト版をメモアプリ用に作る時などに頻繁に使われます。
対応要素
見出し(h1〜h6)、段落、strong・em、インラインコード、言語classを持つコードブロック、title属性付きリンク、alt/title付き画像、順序/非順序リスト(ネスト対応)、引用、水平線、表、改行が変換されます。未知の要素はプレーンテキストとしてフォールスルーし、script・styleブロックは保持されません。変換はブラウザ組み込みのDOMParserで行うためオフラインでも動作し、HTMLがサーバーに送信されることはありません。
主な用途
- レガシーHTMLブログをMarkdownベースの静的サイトジェネレーター(Hugo・Jekyll・Astro)へ移行する。
- WYSIWYGエディタの出力を、Gitベースのドキュメントリポジトリにコミットする前にクリーンアップする。
- Web記事のHTMLをObsidian・Bearなどのメモアプリ用にMarkdown化する。
- HTMLチュートリアルからREADMEスニペットを作成する。
- Markdownを経由することで、インラインスタイルやエディタの残滓をクリーンに除去する。
ヒント
- <body>内部のHTMLだけを貼り付けてください(ツール側で自動ラップします)。
- 表は<thead>内の<tr>に<th>セルを置くか、最初の行がヘッダーとして扱われます。
- コードブロックは言語classヒントを利用します: <code class="language-js">は```jsに変換されます。
- インラインスタイルとスクリプトは削除されます。セマンティックな要素のみ保持されます。
- ルート要素のないHTMLフラグメントも動作します。不正なHTMLはブラウザが寛容モードでパースします。
プライバシー
すべてのHTMLパースはブラウザ内で完結します。入力がサーバーに送信されたり保存されたりすることはありません。
よくある質問
どのHTML要素がMarkdownに変換されますか?
見出し(h1〜h6)、段落、strong/em、インラインコード、言語class付きコードブロック、リンク、画像、順序/ネストされたリスト、引用、水平線、表、改行がすべて変換されます。未知の要素はプレーンテキストとしてフォールスルーします。
変換時にHTMLがどこかに送信されますか?
いいえ。パースにはブラウザ組み込みのDOMParserを使うため、すべてローカルで実行されオフラインでも動作します。入力がサーバーにアップロードされたり保存されたりすることはありません。
コードブロックと言語指定はどう扱われますか?
言語classのヒントはフェンスブロックの言語指定として保持されます。例えば <code class="language-js"> は js とラベル付けされたフェンスになります。インラインコードはバッククォートで囲まれます。
<body>やルート要素のないHTML断片を貼り付けても変換できますか?
はい。内部のHTMLをそのまま貼り付ければツール側で自動的にラップします。不正・不完全なHTMLもブラウザの寛容モードでパースされるため、断片でも変換できます。
インラインスタイルや<script>ブロックはどうなりますか?
削除されます。保持されるのはセマンティックな要素のみで、scriptやstyleブロックは残りません。そのため、Markdownを経由することはエディタの残滓を除去する手軽な方法になります。