メインコンテンツへスキップ
Tooletto

MarkdownからHTMLへ

GitHub風の構文サポート — テーブル、タスクリスト、フェンス付きコード、取り消し線 — 付きでMarkdownをHTMLに変換します。ライブプレビューはサンドボックス化されたフレーム内でレンダリングされるため、貼り付けたものが実行されることはありません。

  • ファイルは端末の外に出ません
  • 無料、登録不要
  • 透かしなし
  • 一度読み込めばオフラインでも動作します
Loading tool…

MarkdownからHTMLへの使い方

  1. 1

    Markdownを書くか貼り付け

    HTMLとプレビューが入力中に更新されます。

  2. 2

    プレビューを確認

    サンドボックス化されたフレーム内でレンダリングされるため、貼り付けたコンテンツはスクリプトを実行できません。

  3. 3

    HTMLをコピー

    マークアップをコピーするか、.htmlファイルとしてダウンロードします。

CommonMark対GitHub Flavored Markdown

Markdownは、単一で権威ある文法を持たない、あまり厳密に規定されていない形式として始まりました。これは、異なる実装がエッジケースで意見を違えることを意味していました — ネストされたリストがどう振る舞うべきか、単語内のアンダースコアが強調としてカウントされるかどうかなど — しばしば、まったく同一のソーステキストから本当に異なるレンダリング出力を生み出す形でです。CommonMarkは、準拠するどのパーサーも正確に従わなければならない単一の正確で曖昧さのない仕様を定義することで、まさにこれを修正するために生まれました。GitHub Flavored Markdown(GFM)はそのCommonMarkの基盤の上に構築され、プレーンなCommonMarkがまったく定義していないいくつかの拡張を追加します: 縦棒文字とハイフンの区切り行で構築されたテーブル、`- [ ]`と`- [x]`として書かれるタスクリストのチェックボックス、二重チルダで囲まれた取り消し線テキスト、そして明示的なリンク構文を必要としない裸のURLの自動ハイパーリンク化です。GFMはこのツールが実装する方言です。GitHub、Reddit、そして圧倒的多数の静的サイトジェネレーターとドキュメントツールがこれに標準化しているためで、これによって他の場所で読まれることを意図して書かれたものすべてにとって最も広く有用なターゲットになっています。

サンドボックス化されたプレビューが何から保護し、何から保護しないか

Markdownの構文は、意図的に生のHTMLを直接その中に埋め込むことを許可します — これは意図的なもので、Markdownの作者が埋め込み要素、特定の配置、あるいはMarkdown構文自体には省略形がないスタイルの一部を挿入できるようにするためのものです。リスクは、信頼できないMarkdownに貼り付けられた`<script>`タグやインラインイベントハンドラ(`onerror=`など)が、通常はそれをレンダリングするコンテキストで実行されてしまうことです。これは、そのMarkdownがプレビューを見ている人以外の誰かから来た場合、本物のクロスサイトスクリプティングのベクトルです。ライブプレビューをスクリプトを無効にしたサンドボックス化されたiframe内でレンダリングすることは、プレビュー内のそのようなスクリプトタグやイベントハンドラが単に実行されないことを意味します — ブラウザは正しくサンドボックス化されたフレーム内でコードを実行することを拒否し、リスクをそのサンドボックス化されたプレビュー内に封じ込めます。

サンドボックス化が行わないのは、あなたがコピーするためにこのツールが生成する*生成されたHTML出力*をサニタイズすることです — そのテキストレベルの出力は、元のMarkdownに存在していた生のHTMLをMarkdown仕様が意図するとおり忠実に保存し続けます。その生成されたHTMLが信頼できない作者のコンテンツを表示するライブページに挿入される予定なら、公開前にサーバー側で独自の別のサニタイズステップが必要です。これは、このプレビューのサンドボックス化が処理するものとは別のステップです。

Markdownがそもそも生のHTMLを許可する理由

Markdownは、HTMLの全能力を完全に置き換えるものとしてではなく、書き手が最も頻繁に頼る構造 — 見出し、リンク、強調、リストなど — の省略形として意図的に設計されました。特定のインラインスタイルから埋め込み動画まで、Markdown自体の構文に相当するものがないものは何であれ、Markdownのソースコード内に直接リテラルなHTMLとして書かれることを意図しており、パーサーはそれを無効として拒否するのではなく、変更せずにそのまま引き継ぎます。これは、特定の実装の抜け穴や見落としではなく、Markdownの元の仕様にまでさかのぼる意図的な設計判断です。

よくある質問

どのMarkdownの派生がサポートされていますか?

GitHub Flavored Markdown: テーブル、フェンス付きコードブロック、タスクリスト、取り消し線、自動リンク、CommonMarkのコアに加えてです。これはGitHub、Reddit、そしてほとんどの静的サイトジェネレーターが使う方言です。

信頼できないソースからのMarkdownを貼り付けても安全ですか?

プレビューはスクリプトを無効にしたサンドボックス化されたiframe内でレンダリングされるため、埋め込まれた`<script>`タグやイベントハンドラは実行できません。*生成されたHTML*はMarkdown内にあった生のHTMLをそのまま含み続けることに注意してください — 自分で書いていないコンテンツを公開する前にサーバー側でサニタイズしてください。

Markdown内の生のHTMLをサポートしていますか?

はい — Markdownはインラインでの HTMLを許可し、そのまま引き継がれます。だからこそ、ソースが信頼できない場合は上記のサニタイズの注意事項が重要になるのです。

なぜ私のテーブルがレンダリングされないのですか?

GFMのテーブルはヘッダーの下にハイフンの区切り行が必要で、テーブルが段落の後に続く場合は先頭に空行が必要です。区切り行に1つでも縦棒が欠けていると、すべてが黙ってプレーンテキストに戻ってしまいます。

MarkdownからHTMLへのよくある使い方