Markdown to HTML 変換ツール — オンラインで Markdown を HTML に変換 _

Markdown to HTML 変換とは何ですか？

Markdown は、最小限の記号（# で見出し、* で強調、- でリスト項目）を使って構造化された文章を表現する軽量プレーンテキスト形式です。GitHub Flavored Markdown（GFM）は、本家 CommonMark 仕様にテーブル、取り消し線、タスクリスト、オートリンクを追加したものです。HTML はブラウザーが描画する形態です。Markdown を HTML に変換することで、軽量な構文で執筆しつつレンダリングされた表面に出力できます — README、静的サイトのページ、メール本文 — タグを手書きする必要はありません。

サポートしている GitHub Flavored Markdown の機能は？

同梱の marked@12.0.2 パーサーは GFM のフルセットに対応します：# から ###### までの ATX 見出し、ネスト可能な順序付き・順序なしリスト、太字 **text** と斜体 *text*、取り消し線 ~~text~~、インラインリンク [text](url) とインライン画像 ![alt](src)、言語タグ付きフェンスコードブロック（```js）、インラインコード `code`、ヘッダー行付きパイプテーブル、GFM タスクリスト - [ ] / - [x]、引用 >、水平線 ---、オートリンク。各要素はプレビューペインで GitHub のレンダリングと同じ結果を示します。

Markdown to HTML 変換はどのように動作しますか？

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

1. 解析：marked.parse(source) が Markdown を読み込み、HTML 文字列を生成します。パーサーは GFM モードで動作するため、テーブル、タスクリスト、取り消し線、オートリンクがすべて認識されます。
2. サニタイズ：HTML 出力は innerHTML に代入される前に DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) を通過します。DOMPurify は Mozilla MDN、Atlassian、Microsoft 365 が採用しているのと同じ XSS サニタイザーで、HTML を解析し DOM を走査して、<script> 要素、すべての on* イベントハンドラー属性、javascript: URI スキームを取り除きます。
3. レンダリング：サニタイズ済み HTML は innerHTML でプレビューペインに書き込まれ、生の HTML は読み取り専用 <textarea> で 2 つ目のパネルに表示され、マークアップをコピーできます。ライブモードは入力を 150 ms デバウンスして、入力中もパーサーに過剰な負荷をかけずプレビューを更新します。

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

• プライバシー：解析・サニタイズ・レンダリングのすべてがブラウザー内で行われます。Markdown — 未公開のブログ記事、社内ドキュメントの草稿、機密の README — はサーバーに届きません。
• 既定で XSS 安全：レンダリングプレビューは innerHTML に渡す前に必ず DOMPurify を通すため、Markdown 内に混入した <script> タグや onerror= ハンドラーも、出力は無害なプレビューになります。ソースパネルはサニタイズ前の文字列を表示しますが、読み取り専用 <textarea> の value として表示されるため実行されません。
• GFM 完全対応：表、取り消し線、タスクリスト、オートリンクが GitHub のレンダリングと同じ結果を示します。Markdown のパイプテーブルは <thead> と <tbody> を持つ HTML <table> に変換されます — 行の欠落も構造の平坦化もありません。

Markdown to HTML 変換の一般的な用途は何ですか？

Markdown を HTML に変換する機会はドキュメンテーション、静的サイト、メール作成のあらゆる場面に登場します：

• GitHub README 執筆：プロジェクトの README を Markdown でローカルに下書きし、push 前にレンダリング済み HTML をプレビューします。プレビューは GitHub の GFM レンダラーと表、タスクリスト、フェンスコードについて一致します。
• 静的サイトコンテンツ：Markdown の記事を貼り付けて HTML を取得し、Markdown ソースではなくマークアップを期待する CMS フィールドやテンプレートエンジンに使います。
• メールテンプレート：トランザクションメールの本文を Markdown で書き、メール送信サービスのテンプレートエンジン用に HTML に変換します。出力は素のセマンティック HTML — インラインスタイルもメールクライアントの癖を吸収する小細工もありません。

Markdown to HTML 変換の例は？

# Title\n\n- item 1\n- item 2\n\n[link](https://example.com) を貼り付けると、プレビューペインには <h1>Title</h1>、2 項目の順序なしリスト、<a href="https://example.com">link</a> が現れます。ソースパネルは正確な HTML 文字列を表示するので、そのままテンプレートに貼り付けられます。|---|---| のアラインメント行を持つパイプテーブルは <thead> と <tbody> を持つ完全な <table> になります — GFM テーブルが GitHub のレンダリングと同じ結果であることを確認できます。

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

はい。解析・サニタイズ・レンダリングのすべてはブラウザータブ内の JavaScript としてローカルに実行されます。2 つの同梱ライブラリ — marked@12.0.2 と DOMPurify@3.1.7 — はページと同一オリジンから配信されるので、CDN 依存も fetch も XMLHttpRequest もなく、入力に対する navigator.sendBeacon もありません。ベンダーライブラリを同梱した静的 HTML/CSS/JS バンドルなので、ページが一度ロードされればオフラインでも動作します。未公開記事、社内ドキュメント、機密の README は手元の端末に留まります。

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

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

GFM の表はサポートされていますか？

はい。Markdown → HTML 方向では marked の GFM モードがパイプテーブルをネイティブに扱います — ヘッダー行を |---|---| のアラインメント行で区切り、データ行を続けると、<thead> と <tbody> を持つ <table> が生成されます。取り消し線（~~text~~ → <del>text</del>）とタスクリスト（- [ ] / - [x] → <input type="checkbox">）も GitHub のレンダリングと同じ結果を示します。

私の Markdown は無損失で変換されますか？

標準的な GFM 機能セット — h1 から h6 までの見出し、ネスト可能な順序付き・順序なしリスト、太字 / 斜体 / 取り消し線、インラインリンク、インライン画像、言語タグ付きフェンスコードブロック、インラインコード、パイプテーブル、タスクリスト、引用、水平線、オートリンク — については、HTML 出力は安定しており GitHub のレンダラーと一致します。知っておくべきいくつかの挙動：Markdown 内の生インライン HTML（例えば <sub>text</sub>）は出力にそのまま透過されます。また、CommonMark の setext 形式見出し（=== アンダーライン）と ATX 形式見出し（# Title）はどちらも同じ <h1> を生成します。これらは marked のドキュメント化された挙動であって、バグではありません。逆方向 — レンダリング済み HTML を Markdown に戻す場合は、HTML to Markdown ツールをご利用ください。

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

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

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