§

HTML を貼り付け

§

ソース

§

プレビュー

プレビューは DOMPurify でサニタイズされます — script タグ、イベントハンドラー、javascript: URI はレンダリング前に取り除かれます。

国内の技術コミュニティで Markdown は事実上の標準です。Qiita と Zenn という二大技術共有プラットフォームは投稿エンジンが Markdown 中心で、はてなブログも Markdown 記法をサポートしています。メルカリ、サイバーエージェント、LINE、DeNA、リクルートテクノロジーズ、ZOZOテクノロジーズのエンジニアリングブログは社内 GitHub の Markdown から生成され、note も独自の Markdown 派生エディタを採用しています。経済産業省(METI)の「DX レポート 2.2」や IPA の OSS 関連調査でも Markdown ベースのドキュメンテーション文化が前提とされ、J-STAGE への論文プレプリント、東京大学・京都大学のレポートテンプレート、CNCF Japan Chapter の登壇資料まで Markdown で書かれています。本ツールは HTML から Markdown への変換をすべてブラウザー内で完結させます。

HTML から Markdown への変換とは何ですか?

HTML はブラウザーが描画する形態の マークアップです — <h1><ul><table><a>、その他。Markdown は、最小限の記号(# で見出し、* で強調、- でリスト項目)を使って同じ構造を表現する軽量プレーンテキスト形式です。GitHub Flavored Markdown(GFM)は、本家 CommonMark 仕様にテーブル、取り消し線、タスクリスト、オートリンクを追加したものです。HTML を Markdown に変換することで、レンダリング済みまたはエクスポートされた HTML を編集可能なプレーンテキスト Markdown に戻せます — CMS からのコンテンツ移行や README の整理に必要なことです。

出力はどの GitHub Flavored Markdown 機能をサポートしていますか?

同梱の turndown@7.2.0 エンジンと turndown-plugin-gfm 拡張が、HTML から GFM フルセットを出力します:<h1><h6> から ####### の ATX 見出し、ネスト可能な順序付き・順序なしリスト、太字 **text** と斜体 *text*<del> からの取り消し線 ~~text~~、インラインリンク [text](url) とインライン画像 ![alt](src)、言語ヒント付きフェンスコードブロック(```js)、インラインコード `code`<table> からのパイプテーブル、checkbox 入力からの GFM タスクリスト - [ ] / - [x]、引用 >、水平線 ---。プレビューペインは marked@12.0.2 で出力された Markdown を再レンダリングするので、変換結果を視覚的に確認できます。

HTML から Markdown への変換はどのように動作しますか?

すべての変換はブラウザー内で 3 つの同梱ライブラリを使ってローカルに実行されます — CDN なし、fetch なし、テレメトリーなし。大まかな手順は次のとおりです:

  1. サニタイズ:貼り付けた HTML はまず DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) に通され、何かが走査される前に <script> 要素、すべての on* イベントハンドラー属性、javascript: URI を取り除きます。DOMPurify は Mozilla MDN、Atlassian、Microsoft 365 が採用しているのと同じ XSS サニタイザーです。
  2. 変換:turndownService.turndown がクリーンな DOM を走査して GitHub Flavored Markdown を出力します — 見出しは # プレフィックスに、リストは - / 1. 項目に、<table> はパイプテーブルに変わります。Markdown は読み取り専用の出力 <textarea>value で書き込まれます(innerHTML は使用しません)ので、本質的に安全です。
  3. レンダリング:出力された Markdown は marked.parse で再解析され、DOMPurify で再サニタイズされ、プレビューペインの innerHTML に割り当てられます — Markdown が期待した構造に往復するという視覚的な確認が得られます。ライブモードは入力を 150 ms デバウンスして、貼り付け中もパーサーに過剰な負荷をかけずプレビューを更新します。

このツールで HTML を Markdown に変換する理由は?

  • プライバシー:サニタイズ・変換・レンダリングのすべてがブラウザー内で行われます。HTML — エクスポートされた CMS 投稿、社内ドキュメント、機密ページソース — はサーバーに届きません。
  • 既定で XSS 安全:貼り付けた HTML は turndown が走査する前に DOMPurify を通り、プレビューペインは再レンダリングされた HTML を innerHTML に渡す前に再度 DOMPurify を通します。そのため、<script> タグや onerror= ハンドラーを含むマークアップを貼り付けても、出力は無害なプレビューとクリーンな Markdown になります。
  • GFM 完全対応:<table> 要素は Markdown のパイプテーブルに、<del> は取り消し線に、checkbox リストは GFM タスクリストに変換されます。多くのオンライン変換ツールは HTML → Markdown のパスで表を失います — 同梱の turndown-plugin-gfm 拡張はそれを保持します。

HTML から Markdown への変換の一般的な用途は何ですか?

HTML を Markdown に変換する用途はコンテンツ移行、ドキュメント整備、アーカイブと多岐にわたります:

  • CMS 移行:WordPress や Ghost の記事を HTML としてエクスポートし、Hugo / Jekyll / 11ty / Astro の静的サイト再構築のために Markdown に変換します。変換は見出しレベル、リンク、リスト、インライン強調を保持します。
  • README 整理:wiki ページや Web 記事のレンダリング済み HTML を貼り付け、プロジェクト README やドキュメントサイト用に編集可能な Markdown として取り出します — 構造を手で書き直す代わりに。
  • アーカイブとメモ:HTML メールや Web クリッピングを取り込んで Markdown に変換し、Obsidian、Notion、またはプレーンテキストの知識ベースに保存します — Markdown は diff に強く、フォーマット変換を生き延びます。

HTML から Markdown への変換の例は?

<h2>Heading</h2><ul><li>a</li><li>b<ul><li>nested</li></ul></li></ul> を貼り付けると、## Heading とネストした箇条書きを持つ Markdown が生成され、プレビューペインは同じ入れ子構造に再レンダリングされます。ヘッダー行と 2 行のデータ行を持つ <table> を貼り付けると、対応する | col | col | パイプテーブルが生成されます — 変換が見出し、リスト、テーブルを保持することを確認できます。

この HTML→Markdown 変換ツールは完全にブラウザー内で動作しますか?

はい。サニタイズ・変換・レンダリングのすべてはブラウザータブ内の JavaScript としてローカルに実行されます。3 つの同梱ライブラリ — turndown@7.2.0turndown-plugin-gfm@1.0.2 同梱)、marked@12.0.2DOMPurify@3.1.7 — はページと同一オリジンから配信されるので、CDN 依存も fetchXMLHttpRequest もなく、入力に対する navigator.sendBeacon もありません。ページが一度ロードされれば静的バンドルなのでオフラインでも動作します。エクスポートされた投稿、社内ドキュメント、機密ページソースは手元の端末に留まります。

レンダリングプレビューペインは XSS 安全ですか?

はい。innerHTML に代入される HTML 文字列はすべて、まず DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) を通過します。DOMPurify は Cure53 がメンテナンスするオープンソースの XSS サニタイザーで、Mozilla MDN、Atlassian、Microsoft 365 がユーザー提供 HTML をハードニングするのに採用しているのと同じライブラリです。既定の html プロファイルは <script> 要素、すべての on* イベントハンドラー属性(onerroronclick など)、href / src 内の javascript: URI スキームを取り除きます。<img src=x onerror=alert(1)> を貼り付けると、document.querySelector('#output-preview img[onerror]')null を返し、アラートも発生しません。

GFM のテーブルは HTML から変換されますか?

はい。HTML → Markdown 方向では turndown-plugin-gfm<table> ノードを走査して同等のパイプテーブル Markdown を出力するカスタムルールを追加します — ヘッダー行、|---|---| のアラインメント行、続けてデータ行です。多くのオンライン変換ツールはこのパスで表を落としますが — このツールは保持します。取り消し線(<del>text</del>~~text~~)とタスクリスト(<input type="checkbox">- [ ] / - [x])も同様に変換されます。

私の HTML はきれいに変換されますか?

標準的な GFM 機能セット — h1 から h6 までの見出し、ネスト可能な順序付き・順序なしリスト、太字 / 斜体 / 取り消し線、インラインリンク、インライン画像、言語タグ付きフェンスコードブロック、インラインコード、パイプテーブル、タスクリスト、引用、水平線、オートリンク — については、変換はクリーンで予測可能です。エッジケース:HTML コメント(<!-- ... -->)は取り除かれます(Markdown にはコメント構文がないため);インラインスタイリングや class 属性は Markdown に対応概念がないため削除されます;<sub> / <sup> のような一般的でないインラインタグは平テキストに変換されます。これらは turndown のドキュメント化された挙動であって、バグではありません。

フェンスコードブロックでシンタックスハイライトはサポートされていますか?

v1 では未対応です。フェンスコードブロックは等幅フォントと淡い背景でレンダリングされますが、言語別のトークン着色はありません。シンタックスハイライトを追加するには Prism や highlight.js を同梱する必要があり、それぞれ 15–40 KB の増加に加え、言語別の文法ファイルと Workshop Terminal パレットに揃えるためのテーマ行列が必要になります。現状ではレンダラーは正確性と XSS 安全性に集中しています。インラインハイライトに需要があれば、オプトインのトグル化が現実的な次の一手です。

この HTML→Markdown 変換ツールは、turndown@7.2.0(+ turndown-plugin-gfm@1.0.2)、marked@12.0.2DOMPurify@3.1.7 を同一オリジンに同梱し、GFM 機能セット全体を出力し、レンダリングされたあらゆる HTML 文字列を DOM に触れる前にサニタイズします。アップロードなし、CDN なし、テレメトリーなし — すべてのバイトがブラウザー内に留まります。