Markdownプレビューツール｜リアルタイム表示とHTMLエクスポート対応
Markdownをリアルタイムでプレビューできる無料オンラインツール。GFM（テーブル・チェックリスト）対応、HTML出力にも対応。データはブラウザ内で処理されます。
詳細設定
このツールについて
使い方・特徴・補足情報
Markdownプレビューとは
Markdownプレビューツールは、入力した Markdown をその場で HTML 表示 するツールです。左に書いた文章が、右に整形されて即座に映ります。
GFM（GitHub Flavored Markdown）に対応し、テーブルやチェックリストも正しく描きます。ブログの下書きや README 作成に向きます。
結果は HTML として書き出し、CMS やブログへ貼り付けられます。処理はすべてブラウザ内で終わり、文章を外部へ送りません。
👤 こんな人におすすめ✨
Markdownで書く人
✅ 楽になること
MarkdownのHTML確認・変換
✍️ 避けたい手間
記法ミスや表示崩れ
解決できる困りごと
- Markdownの書き方が合っているかその場で確認できる
- GitHubにプッシュする前にREADMEの見た目を確認できる
- MarkdownからHTMLへの変換の手間を減らせる
使い方
- 左側のエディタにMarkdown記法で文章を入力します。
- 右側にリアルタイムでプレビューが表示されます。
- 「HTMLをコピー」ボタンで生成されたHTMLを取得できます。
- 「クリア」ボタンで入力をリセットします。
使用例
見出しとリストの記法
Markdownの基本である見出し（#）と箇条書き（-）を確認する例です。記号の数や位置で構造が変わります。
入力
# 買い物リスト
- りんご
- バナナ
出力
「買い物リスト」が大見出し、りんご・バナナが箇条書きで表示される
テーブル記法（GFM）
GitHub Flavored Markdownのテーブル記法の例です。パイプ（|）とハイフンで列を作ります。
入力
| 商品 | 価格 |
|------|------|
| 茶 | 100円 |
出力
2列の表組みとして整形して表示される
チェックリスト記法
タスク管理に便利なチェックリストの例です。[ ]で未完了、[x]で完了を表します。
入力
- [x] 企画書作成
- [ ] レビュー依頼
出力
チェックボックス付きのリストとして表示される
活用シーン
ブログ記事の下書き
Markdown で書いた記事を、公開前にプレビューで確かめられます。見出しやリストの整形を、変換前にチェックできます。
GitHub READMEの作成
README.md を書くとき、push する前に表示を確認できます。表やコードブロックの描画を事前に見られます。
技術ドキュメントの執筆
API ドキュメントや手順書を書くとき、コードや見出し構造を見ながら整えられます。貼り付け前に体裁を確認できます。
Markdown記法の学習
記法を入力すると結果がすぐ見えるので、書き方を効率よく覚えられます。試しながら記法を体得できます。
メモ・議事録の整形
プレーンなメモや議事録を整形し、読みやすい HTML にして共有できます。社内向けでも手元で完結します。
技術的な解説
補足: 仕組み
Markdown の解析と HTML 変換には marked などのパーサーを使います。入力をトークンに分け、対応する HTML 要素へ対応づけます。
GFM 拡張でテーブル・チェックリスト・取り消し線・自動リンクに対応します。コードブロックには言語別のシンタックスハイライトも当てます。
生成した HTML は XSS 対策のサニタイズを通してから表示します。変換はすべてブラウザ内の JavaScript で動きます。
もっと詳しく
改行の扱いがGFMと標準で違う
標準の Markdown では、改行を1回押すだけでは改行になりません。行末に半角スペース2つを置くか、空行を挟む必要があります。
GFM では編集中の改行がそのまま <br> になることが多くあります。本ツールは GFM 準拠なので、他の CMS に貼ると改行が消える場合がある点に注意してください。
プレビューとコピーされるHTMLの違い
右側のプレビューは、ブラウザが CSS で装飾した「見た目」です。「HTMLをコピー」で取れるのは、装飾を含まない素のタグ構造です。
貼り付け先では、その場の CSS に従って表示されます。プレビューの装飾を再現したいなら、貼り付け先で別途 CSS を当てる必要があります。
関連ツール
同じカテゴリの他のツールも合わせてどうぞ。