HTML を Markdown に変換する方法

HTML で書かれたコンテンツを Markdown に変換したい場面は意外と多くあります。WordPress の記事を Hugo や Astro に移行する、Notion のエクスポート HTML を整形する、Web ページの内容をメモとしてクリップする。こうした作業では HTML から Markdown への変換が必要になります。

この記事ではユースケースごとの使いどころを整理したうえで、ブラウザだけで完結する変換手順を紹介します。

まず結論から

HTML to Markdown に HTML を貼り付けて実行ボタンを押すだけで、Markdown が出力されます。インストール不要、ブラウザ内で処理が完結するのでデータが外部に送信されることもありません。

どんな場面で変換が必要になるか

WordPress や CMS からの移行

WordPress の記事データは HTML 形式でエクスポートされます。これを Hugo、Astro、Jekyll などの静的サイトジェネレータに移行するには、各記事を Markdown に変換する必要があります。記事数が少なければ手作業でも対応できますが、構造を崩さずに一括変換するならツールを使うのが確実です。

Notion エクスポートの整形

Notion は HTML 形式でのエクスポートに対応しています。ただし出力される HTML には Notion 独自の class 属性やネストされた div が大量に含まれており、そのまま他のツールに持ち込むには扱いづらい形式です。Markdown に変換すれば不要な装飾が取り除かれ、可読性の高いテキストになります。

Web ページのクリップ

Web ページの内容をメモやドキュメントに引用したいとき、HTML をそのままコピーするとタグやスタイルが混入します。Markdown に変換すれば構造だけを残した読みやすいテキストになります。LLM にコンテキストとして渡す場合にも、HTML よりトークン効率のよい Markdown の方が適しています。

HTML メールの再利用

受信した HTML メールの本文をドキュメントに転記するとき、HTML タグを手で削除するのは手間がかかります。変換ツールを使えば見出し・リスト・リンクの構造を保ったまま Markdown テキストとして取り出せます。

FormatArc で変換する

HTML to Markdown は、HTML を貼り付けてボタンを押すだけで Markdown を出力します。

ステップ 1: ツールを開く

HTML to Markdown にアクセスします。

ステップ 2: HTML を貼り付ける

左側のエディタに変換したい HTML を貼り付けます。<table>、<ul>、<ol>、<a>、<img> など主要なタグに対応しています。

ステップ 3: 実行ボタンを押す

実行ボタンを押すと、右側に Markdown が出力されます。

処理はブラウザ内で完結します。社内ドキュメントや未公開コンテンツを貼り付けても外部サーバーに送信されません。

CLI やコードで変換する方法

ブラウザツールのほかに、コマンドラインやプログラムから変換する方法もあります。

Pandoc

pandoc -f html -t markdown -o output.md input.html

ローカルにインストールが必要ですが、大量のファイルを一括変換するときに便利です。GFM テーブルを出力したい場合は -t gfm を指定します。

Turndown (JavaScript)

import TurndownService from "turndown";

const turndown = new TurndownService();
const markdown = turndown.convert("<h1>Hello</h1><p>World</p>");
console.log(markdown);

Node.js プロジェクトに組み込む場合の定番ライブラリです。プラグインでテーブルや strikethrough にも対応できます。

よくある問題と対処法

テーブルの変換

HTML の <table> は Markdown のパイプテーブル (| col |) に変換されますが、セル内に改行やネストされたリストが含まれると Markdown の制約で正確に再現できないことがあります。複雑なテーブルは変換後に手動で調整してください。

スタイル属性の除去

style 属性や class 属性は Markdown に対応する概念がないため、変換時に自動的に削除されます。装飾情報が必要な場合は変換前の HTML を保持しておくのが安全です。

画像パスの扱い

<img src="..."> は ![alt](src) に変換されますが、相対パスで書かれた画像は変換先の環境でパスが通らないことがあります。移行作業の場合は画像ファイルのコピーとパスの書き換えを別途行ってください。

まとめ

HTML から Markdown への変換は、CMS の移行、Web ページのクリップ、エクスポートデータの整形など幅広い場面で必要になります。ちょっとした変換なら HTML to Markdown にブラウザから貼り付けるのが手早いです。

逆方向の Markdown から HTML への変換が必要な場合は Markdown to HTML 変換ガイド を、CSV から Markdown テーブルを作りたい場合は CSV to Markdown 変換ガイド を参照してください。