HTMLをMarkdown形式に変換する方法

HTMLからMarkdownへ変換する前に

HTMLコードをMarkdown形式のテキストへ変換したいときに使います。見出し、リンク、画像、インライン装飾、コード、リストなど、対応するパターンをMarkdown風の表記へ置き換え、対応後に残ったタグ構文を取り除きます。入力欄は省略でき、空のままでも処理は成功しますが、結果は空のテキストです。

変換の手順

1. 変換したいHTMLコードを入力欄に貼り付けます。入力全体を対象にするため、必要な範囲を確認してから実行してください。
2. 変換を開始する操作を選びます。見出しはレベル1から6までMarkdownの見出し接頭辞に変わり、引用、段落、改行、水平線、一部のリストやブロック要素にはMarkdown風のテキストや空白が適用されます。
3. リンクと画像の属性が対応する形なら、リンクはMarkdownリンク、画像はMarkdown画像になります。属性のないstrong、b、em、i要素は強調記号へ変換され、対応するpreとcodeの組み合わせはフェンス付きコードブロック、対応するcode要素はインラインコードになります。
4. 出力を確認し、必要ならHTMLのタグ構造や属性の付き方を調整して再実行します。変換後は対応するタグ構文が除去され、タグ内の通常のテキストは残ります。対応する名前付きエンティティと、数字だけで構成された10進数の文字参照もデコードされます。

変換結果の見方

出力はHTMLをそのまま再現するものではなく、対応するパターンをMarkdown風の表記へ整理したテキストです。先頭と末尾の空白は取り除かれ、改行が4つ以上続く場合は3つに整理されます。scriptとstyleのブロックは、指定された開閉パターンに一致した場合に内容ごと除去されます。

属性付きの要素、入れ子の形、属性の順序などが対応パターンと異なる場合は、期待した変換にならないことがあります。また、数字だけの10進数参照でも、文字変換で扱える範囲外の値はエラーになる場合があります。形式を確認し、変換後の見出し、リンク先、画像の代替テキスト、コードブロックの境界を確認してください。

使用例

短いHTMLスニペットの見出しがMarkdownの見出し表記になるかを確認したい場合に使います。

入力欄に<h2>章の見出し</h2>を貼り付け、変換を実行して出力を確認します。

変換後は、見出しのテキストがMarkdownの見出し接頭辞付きになり、対応する要素がMarkdown風のテキストとして並ぶ形になります。

制限事項

• 変換は対応するパターンに限られます。属性、入れ子、タグ構造が異なるHTMLでは、要素が期待どおりに変換されない場合があります。

よくある間違い

• 属性や入れ子を含むHTMLを、対応する単純なパターンと同じように変換できると思う。属性、タグの組み合わせ、入れ子を確認し、対応する形に整えてから再実行する。

よくある質問

HTMLを入力しなくても変換できますか？

入力欄が空、または入力を省略した場合は、処理が成功し、変換結果は空のテキストになります。

すべてのHTMLをMarkdownに変換できますか？

対応する単純なタグ構造なら変換されますが、属性付きの要素や異なる入れ子、タグ構造は変換されず、残ったタグ構文だけが除去される場合があります。

HTMLエンティティは変換されますか？

数字だけの形式&#数字;はデコード対象ですが、数字以外を含む不正な形式は変更されない場合があります。数字だけでも文字変換の範囲外なら、エラーになることがあります。