HTMLをきれいなMarkdownに変換

HTMLをMarkdownに変換する手順

1. HTMLを追加します。ボックスにマークアップを貼り付ける、ローカルの.htmlファイルを開く、またはWebページの一部をコピーして貼り付けます。リッチ貼り付けがオンなら、コンバーターはプレーンテキストではなく、クリップボードにある書式付きのHTMLを使います。
2. リンクが相対パスなら、ベースURLを設定します。ページのソースから取り出したマークアップには、/docs/setupのようなリンクがよくあります。ページのアドレスを入力すると、相対リンクと画像がすべて絶対URLになります。
3. Markdownのスタイルを選びます。初期設定（ATX見出し、ハイフンの箇条書き、フェンス付きコード、インラインリンク、GFMオン）は、GitHub、GitLab、Obsidian、ほとんどの静的サイトジェネレーター、AIツールに合います。
4. コピーまたはダウンロードします。結果は入力に合わせて更新されます。クリップボードにコピーするか、最初の見出しを名前にした.mdファイルとして保存できます。

要素ごとの変換結果

Markdownの語彙はHTMLよりずっと小さいので、コンバーターの本当の仕事は、各要素を何に変えるかを決めることです。このツールの出力は次のとおりです。

• 見出し：<h1>〜<h6>は#〜######になります。Setext形式で下線が引けるのはH1とH2だけで、それが構文の限界です。H3以下は#のままです。
• 太字と斜体（<strong>、<b>、<em>、<i>）は、選んだ区切り記号が使われます。
• リンクは[テキスト](url "title")になります。参照リンクを選ぶと、文書の末尾にまとめた番号付きの参照になります。スクリプトを実行するリンク（javascript:）やdata:のデータを持つリンクは、テキストだけになります。
• 画像は![alt](src)になります。本当のアドレスをdata-srcに持つ遅延読み込みの画像も拾います。data:のインライン画像は、base64の塊がMarkdownを読めなくするため、除外されます。
• リストは、何段に入れ子になっていても、親の項目の下にインデントされます。番号付きリストはstartの値を保つので、4から始まるリストは4から始まります。
• 引用は、入れ子の引用を含めて>の行になります。
• コード：インラインの<code>はバッククォートに、<pre>ブロックは、言語が宣言されていればその言語付きのフェンスブロックになります（下記参照）。
• 表はGFMのパイプ表になります。詳細と制限は次のセクションにあります。
• 取り消し線とタスクリスト：<del>、<s>、<strike>は~~テキスト~~になり、チェックボックスで始まるリスト項目は- [ ]または- [x]になります。
• 完全に除去されるもの：<script>、<style>、<noscript>、<template>、iframe、embed、SVG、canvas。<div>や<span>のようなレイアウト用のラッパーは外され、テキストだけが残ります。これこそ、Markdownが元のHTMLより小さく、読みやすくなる理由です。

表：Markdownで表せるものと表せないもの

GitHub Flavored Markdownの仕様（英語）は、表を、ヘッダー行、ハイフンの区切り行、本文の行で定義しています。仕様にある3つのルールが、HTMLの表の変換のしかたを決めます。

• ヘッダー行が必要です。表計算ソフトや古いCMSのページから貼り付けたHTMLの表には、<th>セルがまったくないものが多くあります。そのままではパイプ表にできないため、初期設定では1行目をヘッダーにします。それらの表をHTMLのまま残したい場合は、オプションのチェックを外してください。
• セルの中にブロック要素は置けません。仕様では、表にブロックレベルの要素は挿入できないとされているため、セル内の段落と改行は1行に平らにされます。セル内のリストは構造を失います。表にリッチな内容が入っているなら、HTMLのまま残すことを検討してください。
• リテラルのパイプはエスケープが必要です。セル内の|は新しい列を始めてしまうので、コンバーターは\|と書きます。これはコードスパンの内側を含め、セル内のどこでも仕様で認められています。

結合セルは部分的に対応します。colspan="3"のセルの後ろに2つの空セルを置くことで、列がずれないようにします。行の結合（rowspan）に相当するMarkdownの書き方はないため、再現されません。<caption>は、表の上に独立した段落として移され、align属性による列の揃えは、区切り行の:--、:-:、--:になります。

コードブロックとシンタックスハイライト

フェンス付きコードブロックは、開始のフェンスの後ろに```pythonのような情報文字列を付けられ、レンダラーはこれを使ってコードに色を付けます。コンバーターは、ハイライターが言語を置く場所を探します。language-*とlang-*のクラス（Prism、highlight.js、ほとんどのMarkdownレンダラー）、GitHubのhighlight-source-*ラッパー、data-langまたはdata-language属性です。内側に<code>要素のない<pre>も、エスケープされた文章ではなく、コードブロックとして扱われます。

コードのテキストはそのまま取り出されるので、ハイライターのマークアップ（色付けされた無数の<span>要素）は、コード本体に影響せずに消えます。コード自体にバッククォート3つの連続が含まれる場合は、仕様で閉じのフェンスが開きのフェンス以上の長さである必要があるため、その連続より長いフェンスが使われます。これにより、Markdownについて書かれたMarkdown文書も壊れません。

オプションの解説

ATX見出しとSetext見出し

ATX見出し（# タイトル）は6つのレベルすべてで使え、ほとんどのツールが期待する形式です。Setext見出しは、テキストの下に===または---で下線を引きます。H1とH2にこれを好むスタイルガイドもありますが、H3以下は表せません。

インラインリンクと参照リンク

インラインリンクは、各URLをテキストのそばに置くので、短い文書やAIのプロンプトに向いています。参照リンクはURLを末尾の番号付きリストに移すので、プレーンテキストエディタでも長い段落が読みやすく、ドキュメントのリポジトリでよく使われます。

Markdown記号のエスケープ

2024. 良い年やfile_name_hereのようなテキストは、リストや斜体と誤解されてしまうため、コンバーターはこれらの記号をバックスラッシュでエスケープします。表示（レンダリング）されるものなら、それが正解です。出力をAIモデルとのチャットや検索インデックス、プレーンテキストのメモに入れる場合は、エスケープのチェックを外すと、すっきりしたテキストになります。

ベースURL

相対URLは、元のページの中でしか意味を持ちません。ベースURLを設定すると、https://example.com/blog/post上の../images/chart.pngは、ブラウザと同じルールで解決されてhttps://example.com/images/chart.pngになります。

Webページ全体を変換するには

このコンバーターはURLを取得しません。ブラウザ上のページは、他のサイトが許可しない限りそのHTMLを読み取れず、現代の多くのページは読み込み後にJavaScriptで内容を組み立てるため、サーバー側で取得しても空の殻が返ることがよくあります。表示されたページからコピーすれば、どちらの問題も避けられます。記事を選択してコピーし、ここに貼り付けてください。実際に見ているテキストが、リンクと書式つきで得られ、選択していないナビゲーション、Cookieバナー、広告は含まれません。ページのリンクをすべて取り出したいなら、代わりにリンク抽出ツール（英語）を使ってください。

よくある問題と対処法

• 表が出力でHTMLになっている。GFMがオフか、ヘッダーの昇格がオフで、しかも表にヘッダー行がありません。どちらかのオプションをオンに戻してください。
• リンクの行き先が違う。相対リンクだったためです。ページのアドレスをベースURLに入れてください。
• 改行が変に見える。<br>は、CommonMarkのハード改行である「末尾のスペース2つ＋改行」になります。保存時に末尾のスペースを削るエディタもあり、その場合はソフトな改行に戻ってしまいます。
• テキストが抜けている。JavaScriptを多用するサイトでソースを表示して取ったHTMLなら、内容がマークアップにそもそも含まれていないことがあります。代わりに、表示されたページからコピーしてください。
• すべてが1つの段落になる。元のHTMLが、段落に<p>ではなく<div>を使っていたためです。Markdownは意味を持つ要素しか知らないので、装飾されたdivだけで作られたページは、続いたテキストに変換されます。

そもそも、なぜHTMLをMarkdownに変換するのか

Markdownは、意味を担うもの（見出し、強調、リンク、リスト、表、引用、コード）を残し、レイアウトのマークアップとインラインのスタイルを捨てます。そのため、編集しやすく、バージョン管理でレビューしやすく、Obsidianのようなナレッジベースやドキュメントサイトに移しやすく、class属性にコンテキストを使わせることなくAIモデルに渡せます。開発者はCMSのコンテンツを静的サイトに移すために、ライターは下書きをエディタ間で移すために、研究者は情報源のきれいなコピーを残すために使います。変換ではなく、情報源を集める側にいるなら、Marqlyはリサーチ用のリンクを整理して、検索できる1つのライブラリにまとめられます。開発者向けのワークフローのページでは、保存したドキュメントやスニペットを見つけやすく保つ方法を紹介しています。

プライバシーを前提にした設計

このコンバーターは、オープンソースのTurndownライブラリとそのGitHub形式のMarkdownプラグイン、そしてこのページ独自の表・コード・リンクの処理で構成され、すべてページに同梱されています。一度読み込めばオフラインでも動き、貼り付けたテキスト、ファイル、設定は端末の中にとどまります。変換の前後に大きさをざっと確認したいなら、読了時間計算ツールも、単語数と文字数をローカルで数えます。