HTML → Markdown 変換器

Qiita の記事 HTML を Markdown に戻す

Qiita API v2 の記事データには、Markdown 本文の body と、表示用の HTML の rendered_body が入っています（Qiita API v2 ドキュメント）。手元に HTML しか残っていない場合を想定して、Qiita 公式の「Markdown記法 チートシート」の rendered_body（2026-10-08 に API で取得）からコードブロック 1 つを取り出して変換してみます（data-sourcepos 属性は省略しました）。出力は本ツールの変換器（Turndown 7.2.4 と turndown-plugin-gfm 1.0.2 の表の規則）で計算したものです。

<div class="code-frame" data-lang="ruby">
<div class="code-lang"><span class="bold">qiita.rb</span></div>
<div class="highlight"><pre><code><span class="nb">puts</span> <span class="s1">'The best way to log and share programmers knowledge.'</span>
</code></pre></div>
</div>

変換結果：

qiita.rb

```
puts 'The best way to log and share programmers knowledge.'
```

ハイライト用の span は外れてコードの文字だけが残りますが、言語名とファイル名は失われます。Qiita の HTML では言語名が外側の div の data-lang に、ファイル名が div.code-lang の文字として入っていて、本ツールは <code> の language- クラスからしか言語名を読まないためです。ファイル名は普通の段落になってしまいます。

元の記事に戻すなら、フェンスを手で書き直します。チートシートによると Qiita では ```ruby:qiita.rb のように言語名とファイル名を : で区切って書きます。Zenn も「Markdown記法一覧」で ```js:ファイル名 の形を案内しています。段落になった qiita.rb の行は削除してください。

日本語の太字が外れる書き方

HTML では問題なく太字になる書き方でも、Markdown に変換すると太字にならないことがあります。

<p><strong>注意：</strong>ここは必須です</p> は **注意：**ここは必須です になります。この Markdown を本サイトの Markdown プレビュー（micromark と GFM 拡張）に貼ると、太字にならず ** がそのまま表示されます。CommonMark の規則では、閉じる ** の直前が全角コロン「：」のような句読点のとき、直後は空白か句読点でなければなりません（CommonMark 0.31.2 §6.2）。ここでは直後が「こ」なので閉じ記号と認められません。Qiita のチートシートも強調について「前後に 半角スペース か 改行文字 を入れてください」と注意しています。GitHub と Zenn での結果は「マークダウン記法 一覧」で確かめています。

句読点を太字の外に出して <p><strong>注意</strong>：ここは必須です</p> にすると、出力は **注意**：ここは必須です で、プレビューでも太字になります。本ツールはこの書き換えをしないので、HTML か変換後の Markdown のどちらかを手で直してください。

閉じ忘れたタグの扱い

途中までしかコピーできなかった HTML でも変換はできますが、結果には補正の影響が出ます。<ul><li>東京<li>大阪</ul><p>営業時間：<b>10時〜<p>定休日：水曜 の出力は次のとおりです。

-   東京
-   大阪

営業時間：**10時〜**

**定休日：水曜**

</li> がなくても次の <li> で前の項目が閉じるので、リストは 2 項目のまま正しく変換されます。一方、閉じていない <b> は、新しい <p> で段落が終わったあと次の段落でもう一度開かれます。これは HTML 標準のパース規則（アクティブな書式要素の再構築）によるもので、ブラウザでの表示でも「定休日：水曜」は太字です。</b> を補ってから変換すれば防げます。

変換リファレンス

制限

• 打ち消し線（<del>、<s>）、マーカー（<mark>）、タスクリストのチェックボックスは変換せず、文字だけを残します。
• 表の colspan と rowspan は無視します。GFM のテーブルにはセル結合がありません。
• <script>、<style>、<title> の中の文字は消えません。必要な部分の HTML だけを貼り付けてください。
• src 属性のない <img> は跡形もなく消えます。画像を遅延読み込みするページでは、表示されるまでアドレスを data-src に入れていることがよくあります。画像が読み込まれてからコピーするか、属性名を src に直してから変換してください。
• コードの言語名は <code> の language- クラスからだけ読み取ります。<pre> のクラスや data-lang 属性にある言語名は使われず、言語名のないフェンスになります。
• 相対パスのリンクや画像はそのまま残り、公開先のページを基準に解決されます。
• 1,048,576 文字を超えると「入力が非常に大きいため、変換に時間がかかる場合があります。」と表示されますが、変換はそのままページ内で続きます。
• 本サイトの Markdown プレビューは生の HTML を文字として表示します。表のセル内の <br> や HTML のまま残した表は、プレビューではタグがそのまま見えます。