FIRST CH TOOLS / テキスト / 57 HTML → Markdown

HTML → Markdown 変換

WebページのHTMLを左に貼ると、Markdownになって右に出ます。見出し・リスト・表・リンク・画像・コードブロックに対応し、scriptstyle ・装飾のための divspan は自動で落とします。既存サイトの原稿をMarkdown管理へ移すとき、AIが取得したページを読みやすく整えるときに使ってください。

貼り付けるとその場で変換されます

HTML
Markdown
0
見出し
リンク
0
画像
0
0
コードブロック
0
出力の文字数
読み取りの結果

    貼り付けたHTMLがブラウザの外へ出ることはありません(解釈も組み立てもこのページの中だけで動いています)。ファイルの読み込みも端末内で読むだけで、アップロードは行いません。URLパラメータで直接呼び出せます: /html-md/?html=%3Ch1%3EA%3C%2Fh1%3E/html-md/?main=1&base=https://example.com/

    How to Use

    1. HTMLを貼り付けるページのソース、開発者ツールでコピーしたHTML、CMSの本文などを左の欄に貼ります。.html ファイルのドラッグ&ドロップにも対応しています。
    2. 移し先に合わせて整えるページ全体を貼ったなら「本文だけ」を入れ、別の場所へ貼るなら「ベースURL」に元ページのアドレスを入れてリンクを絶対URLに直します。
    3. Markdownをコピーする右の欄に結果が出ます。そのままコピーするか .md として保存してください。表やHTMLのまま残った要素は「読み取りの結果」で確認できます。

    About This Tool

    HTMLの解釈をブラウザに任せていません。この手のツールは DOMParserinnerHTML でHTMLを読むのが普通ですが、このツールは字句解析から木の組み立てまでを自前で持っています。理由は2つあります。ひとつは、同じロジックをMCPサーバー(Node.js)でも動かすため——DOMに依存すると、ブラウザとAIエージェントで結果が変わります。もうひとつは安全のためで、貼り付けたHTMLを innerHTML に入れると、その中の <img onerror> のようなコードがこのページ上で動いてしまいます。解析だけを行う実装なら、貼り付けた内容が実行されることはありません。

    壊れたHTMLでも結果を返します。実際のWebページから取ってきたHTMLは、閉じタグの無い <li><p> 、対応の無い閉じタグ、引用符の閉じ忘れを普通に含みます。このツールはブラウザと同じように開いたままの要素を末尾で閉じ、行き場のない閉じタグを捨てて変換を続けます。ただし黙って直すのではなく、補った件数を「読み取りの結果」に出します。属性の引用符が閉じていない場合だけは打ち切ります——そこで止めないと、残りの文書すべてを1つの属性値として飲み込んでしまうためです。

    Markdownに書けないものは、黙って捨てずに報告します。セルの結合・定義リスト・上付き文字・iframe など、Markdownに対応する記法が無い要素は必ずあります。このツールは「HTMLのまま残す/文字だけ残す/取り除く」を選べるようにしたうえで、何が起きたかを毎回一覧に出します。移行作業で怖いのは変換の失敗ではなく、失われたことに気づかないまま公開してしまうことだからです。

    相対URLは移行でいちばん壊れるところです。元のページの中では正しく動いていた /about/../img/a.png は、Markdownを別の場所(リポジトリのREADME・別ドメインのCMS)へ貼った瞬間に別の場所を指します。ベースURLを入れておけば、リンクと画像を絶対URLへ直したうえで、#anchor やすでに絶対URLのものはそのまま残します。

    AIエージェントが取得したページの後処理にも使えます。HTMLのままLLMに渡すと、タグと属性でトークンを大量に消費します。本文だけを取り出してMarkdownにすれば、同じ内容がおおむね数分の一の長さになり、見出しや表の構造も保てます。この変換はMCPツール html_to_markdown としても提供しているので、ブラウザを開かずにエージェントから直接呼べます。

    逆方向(Markdownから配布物を作る)はMarkdown→PDF変換Marp Markdown→スライドが使えます。表だけを扱うならMarkdownテーブル整形&CSV/TSV変換、HTMLの特殊文字そのものを扱うならHTMLエンティティ・特殊文字エスケープをどうぞ。

    From AI Agents

    この変換ロジックは、MCP(Model Context Protocol)サーバー @first-ch/tools-mcphtml_to_markdown ツールとしても提供しており、ブラウザを使わずAIエージェントから直接呼び出せます。取得したページのHTMLをそのまま渡せば、本文だけをMarkdownにして返します(ネットワークへは出ないので、取得そのものはエージェント側で行ってください)。導入方法の詳細は AIエージェントからの使い方 を参照してください。

    導入

    claude mcp add firstch-tools -- npx -y @first-ch/tools-mcp

    呼び出し例

    # HTML断片をMarkdownへ
    html_to_markdown(html="<h1>見出し</h1><p>本文</p>")
    
    # 取得したページから本文だけを取り出し、相対URLを絶対URLに直す
    html_to_markdown(path="/tmp/page.html", main_only=true, base_url="https://example.com/blog/1/")
    
    # リンクを外し、画像も落として文章だけにする(要約の前処理)
    html_to_markdown(html="...", links="strip", images="drop")
    
    # CommonMarkだけの環境へ貼る(表はHTMLのまま残る)
    html_to_markdown(path="/tmp/page.html", gfm=false, outputPath="/tmp/page.md")

    Other Tools