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>` の場合でも最初の行はヘッダーとして扱います。`| :--- |` で左揃え、`| :---: |` で中央揃え、`| ---: |` で右揃えを指定できます。セル内にパイプ文字（|）が含まれる場合は`|`のようにエスケープが必要です。複雑なHTMLテーブル（セル結合・入れ子テーブルなど）はMarkdownのパイプ記法では表現できないため、そのままHTMLタグとして出力されます。
コードブロックの変換
`<pre><code>` は ``` で囲まれたコードフェンスに変換されます。`<code class="language-javascript">` のようにクラスに言語名が含まれている場合は、そのままフェンスの言語ヒント（` ```javascript `）として出力されます。インラインの `<code>` はバッククォートで囲まれたインラインコードになります。
ネストしたリストの扱い
`<ul>` と `<ol>` のネストは、インデント（2スペース）で表現されます。`- 親項目` の下に ` - 子項目` が続く形式です。`<li>` の中にさらに `<ul>` や `<ol>` がある場合も正しく再帰的に変換されます。`<ol>` の場合は自動で番号が振られ、`1. 項目1`・`2. 項目2` の形式になります。`<li>` 内にブロック要素（段落・コードブロックなど）がある場合は、インデントを維持したまま変換されます。`<dl>`（定義リスト）はMarkdownに直接対応する記法がないため、HTMLタグのままか`**用語**`+改行の近似形式で出力されます。