HTMLをMarkdownに変換する理由と使い方
WebページのHTMLをMarkdownに変換したい場面は多くあります。ブログ記事の移行、ドキュメントのコピー、CMS間のコンテンツ移植など。このツールはブラウザ内で完結するHTML→Markdown変換を提供します。
MarkdownとHTMLの対応関係
MarkdownはHTMLを人間が読みやすい記法で書くための軽量マークアップ言語です。`<h1>`は`# 見出し`、`<strong>`は`**太字**`、`<a href="url">テキスト`は`[テキスト](url)`に対応します。GitHubやZennなどのプラットフォームはGFM（GitHub Flavored Markdown）を採用しており、テーブル記法も追加されています。
GFMテーブルの変換
HTML の `<table>` タグは GFM のパイプ記法テーブルに変換されます。`| ヘッダー1 | ヘッダー2 |` の形式でヘッダー行、`| --- | --- |` でセパレータ行、その後に各データ行が続きます。ヘッダーセルが `<th>` でなく `<td>` の場合でも最初の行はヘッダーとして扱います。`| :--- |` で左揃え、`| :---: |` で中央揃え、`| ---: |` で右揃えを指定できます。セル内にパイプ文字（|）が含まれる場合は`\|`のようにエスケープが必要です。セル結合（colspan・rowspan）はMarkdownのパイプ記法では表現できないため、結合は解かれて左上のセルにだけ文字が入ります。セルの中の太字やリンクは残ります。
コードブロックの変換
`<pre><code>` は ``` で囲まれたコードフェンスに変換されます。`<code class="language-javascript">` のようにクラスに言語名が含まれている場合は、そのままフェンスの言語ヒント（` ```javascript `）として出力されます。インラインの `<code>` はバッククォートで囲まれたインラインコードになります。
ネストしたリストの扱い
`<ul>` と `<ol>` のネストは、親の項目の印の幅だけ字下げして表現します。`- 親項目` の下なら2文字、`1. 親項目` の下なら3文字です。CommonMark では、番号付きリストの下を2文字だけ字下げしても入れ子にならないため、印の幅に合わせる必要があります。`<ol start="3">` のような開始番号も引き継ぎます。`<li>` 内に複数行の内容がある場合も、続きの行を同じ幅で字下げします。`<dl>`（定義リスト）はMarkdownに直接対応する記法がないため、用語と説明が本文として並びます。