HTML→Markdown変換

HTMLをきれいで読みやすいMarkdownに変換します。

ブラウザ内で動作します。入力した内容はどこにも送信されません。

HTMLをMarkdownに変換する方法

  1. HTMLを貼り付けます。
  2. 入力するとMarkdownが表示されます。
  3. Markdownをコピーまたはダウンロードします。

要素の変換のされ方

HTMLMarkdown
<h2>Title</h2>## Title
<strong>bold</strong>**bold**
<a href="...">text</a>[text](...)
<code>x</code>`x`
<pre><code>...</code></pre>```で囲んだフェンス付きコードブロック

きれいに変換されないもの

  • HTMLの表はMarkdownの表構文ではなく、プレーンテキストとして出力されます。
  • インラインスタイルやCSSクラスは、Markdownに対応する表現がないため削除されます。
  • レイアウト用のdivなど、標準的でない構造のHTMLは単なる段落になります。
  • 見た目の間隔調整だけに使われた繰り返しの空白や改行は、ブラウザが通常HTMLの余分な空白を扱うのと同じように、1つの空白にまとめられます。

変換したMarkdownの使い道

  • Markdownしか受け付けないREADMEやWikiにWebページを貼り付ける。
  • 整理したコンテンツを静的サイトジェネレーターに渡す。
  • CMSから書き出したドキュメントを、Markdownベースのドキュメントツールに移行する。
  • メールから貼り付けたリッチテキストを整理してから、プレーンテキストの変更履歴に登録する。

Markdown出力のスタイル

  • 見出しは===や---で書く古い下線形式ではなく、#形式（ATX）を使います。
  • コードブロックは4スペースのインデントではなく、3つのバッククォートによるフェンスを使います。
  • 太字は**、斜体は*を使い、Turndownの標準スタイルに合わせています。

HTML→MarkdownのFAQ

どのHTML要素がきれいに変換されますか？

見出し、段落、リスト、リンク、画像、太字・斜体のテキスト、引用、コードブロックはすべてきれいに変換されます。

HTMLの表は変換されますか？

Markdownの表構文には変換されません。Markdownの表対応はツールごとにかなり差があるため、表はテキスト内容のまま出力されます。

Webページ全体を貼り付けられますか？

はい。ページのHTMLソースを貼り付ければ、読める部分のコンテンツがMarkdownに変換されます。

どのライブラリを使っていますか？

広く使われているHTML→Markdown変換ライブラリのTurndownを、ATX形式の見出し（# 見出し）とフェンス付きコードブロックの設定で使用しています。

ネストしたリストにも対応していますか？

はい。ネストした<ul>や<ol>要素は、ネストのレベルを保ったままインデント付きのMarkdownリスト項目に変換されます。

&amp;や&nbsp;のようなHTMLエンティティも変換されますか？

はい。よく使われるエンティティはMarkdown出力内で対応する通常の文字に変換され、&amp;はそのまま&に、&nbsp;は通常の空白になります。

引用や水平線はどうなりますか？

<blockquote>は>で始まる行になり、<hr>はハイフン3つの行になります。どちらも標準的なMarkdown構文です。

WordやGoogleドキュメントから直接コピーしたHTMLも変換できますか？

はい。ただし元のソースには書式設定用の余分なspanタグやインラインスタイルが多く含まれがちです。Markdownには対応する表現がないためそれらは削除され、表示上のテキスト、見出し、リンク、リストはそのまま残ります。

関連ツール