Markdown プレビュー：リアルタイム表示と HTML のコピー
左側に Markdown を入力すると、右側に描画結果がすぐ表示されます。生成された HTML 断片を静的ページやメールテンプレート、CMS に貼り付けたり、Markdown のソースをそのままコピーしたりできます。描画は marked によりブラウザ内で行われ、内容は送信されません。
プレビューが必要になる場面
Markdown は書くのは簡単ですが、表・タスクリスト・フェンス付きコードブロックといった GFM 拡張は、描画して初めて正しさが分かります。README やチケット、CMS に貼る前に確認しておけば、公開後に直す手間が減ります。
もう 1 つの用途は変換です。静的サイトやメールテンプレートに整形済みのブロックを入れたいとき、必要なのは Markdown のソースではなく HTML です。描画結果をコピーするほうが、タグを手で書くより速く正確です。
- README やドキュメント公開前に表・コードブロックの描画を確認する
- Markdown を HTML 断片にして静的ページに貼る
- 非エンジニアの同僚にソースではなく見た目を確認してもらう
- 他所からコピーした Markdown の構文ミスを見つける
描画の仕様とつまずきやすい点
プレビューでは marked の breaks オプションを有効にしているため、段落内の改行 1 つが <br> になります。GitHub と標準の CommonMark は行末の空白 2 つか空行がないと改行しないため、同じ Markdown でも見え方が変わります。コピーした HTML にはこの <br> が含まれ、CommonMark の環境でもそのまま残ります。
表は GFM の書式が必要です。2 行目に |---|---| のような区切り行を置き、列数をヘッダーと揃えます。タスクリストは - [ ] または - [x] と書き、角括弧の中に空白を 1 つ入れます。フェンス付きコードは pre と code を出力し、language-js のような class が付きますが、シンタックスハイライトはありません。
- コピーされる HTML はプレビュー領域の innerHTML で、サイトの CSS は含まれない
- marked は XSS 対策をしないため、生の HTML はそのまま通る。信頼できる内容だけを貼る
- 画像はブラウザが URL へ直接リクエストする（プロキシ経由ではない）
- 脚注・数式・Mermaid には対応していない
代替手段
GitHub と完全に同じ描画（見出しアンカー、脚注、数式、Mermaid）が必要なら GitHub 本体か pandoc を使ってください。サイト全体を公開するなら静的サイトジェネレーター、信頼できない Markdown をサーバー側で描画するなら DOMPurify などのサニタイザーが必須です。
プレーンテキストの抽出や一括変換が目的なら、手でコピーするよりコマンドラインツールのほうが確実です。このプレビューは「書きながら確認する」ためのもので、公開パイプラインの一部ではありません。
- GitHub と同一の描画は GitHub のプレビューか pandoc
- サイト全体の公開は静的サイトジェネレーター
- 信頼できない入力はサーバー側でサニタイズ
- 一括変換はコマンドラインの Markdown 処理系
よくある質問
ここでは改行が反映されるのに、GitHub では改行されないのはなぜですか？
プレビューで marked の breaks オプションを有効にしているため、段落内のすべての改行が <br> になります。GitHub と標準の CommonMark は行末の空白 2 つか空行があるときだけ改行します。そのため同じ Markdown でもここでは行が多く見え、コピーした HTML の <br> が CommonMark 環境でも残って段落間隔が変わります。
コピーした HTML をそのまま自分のサイトに貼れますか？
貼れますが、スタイルは自分で追加してください。コピーされるのはプレビュー領域の innerHTML で、h1、p、ul、table、pre、code、br などのタグだけで、CSS も html/head の外枠も含まれません。また marked はサニタイズしないため、Markdown 内の生の HTML（script タグや onerror 属性）もそのまま出力されます。信頼できる内容だけを貼ってください。
表やタスクリストが描画されないのはなぜですか？
書式が足りないことがほとんどです。表は 2 行目に |---|---| のような区切り行が必要で、列数をヘッダーと揃える必要があります。区切り行がない、または列数が合わないと、ブロック全体が通常の段落として扱われます。タスクリストは - [ ] または - [x] と書き、角括弧の中の空白を 1 つ残してください。空白がないと通常のリスト項目になります。
関連ツール：Markdown Preview