📑 Markdown プレビュー・HTML 変換
Markdown を貼り付けるとリアルタイムで HTML プレビューを表示します。GitHub 風スタイル・コードハイライト対応。
📚 対応している記法
🔗 関連ツール
📖 つまずきやすいポイント
Markdown を貼り付けるとリアルタイムに HTML をレンダリングし、変換後の HTML をそのままコピーできます。GitHub Flavored Markdown の主要な記法とコードハイライトに対応しています。処理はブラウザ内で完結します。Markdown には唯一の仕様がありません — CommonMark・GFM・Qiita・Zenn・Notion・Slack はそれぞれ別の方言で、ここでの見え方が貼り付け先での見え方を保証しません。
| ケース | 何が起きるか | どうする |
|---|---|---|
| 貼り付け先で改行やリストが崩れる | 方言による差がいちばん出るのが改行の扱いです。GFM は単純な改行をそのまま <br> にしますが、CommonMark は改行を無視して 1 つの段落につなげます — 同じテキストが、片方では 3 行、もう片方では 1 行になります。リストのネストもインデント幅が 2 スペースか 4 スペースかで解釈が変わり、2 スペースで書いたネストが平坦なリストになったり、逆にコードブロックと解釈されたりします。Slack に至っては見出しもテーブルも解釈しません。 |
ブロックの前後に必ず空行を入れてください。見出し・リスト・テーブル・コードブロックの前に空行があるだけで、方言による解釈のブレの大半が消えます。段落を分けたいときも改行 1 つではなく空行を使ってください — これはどの方言でも確実に段落として扱われます。リストのインデントは4 スペース (またはタブ) に統一するのが最も安全です。崩れる原因が見つからないときは全角スペースを疑ってください — 日本語入力のまま行頭に入った全角空白は画面上ではまったく見分けが付かず、インデントとしても認識されないので、リストが壊れる原因の上位に来ます。 |
| HTML タグがそのまま通る | Markdown の仕様では生の HTML を書いてよいことになっています — <div> も <script> も、変換器はそのまま出力に通します。このページはあなた自身が入力した内容を表示するだけなので無害化していませんが、この挙動を理解しないまま同じ仕組みをサービスに組み込むと、そのまま XSS になります。「Markdown だから安全」という誤解は根強く、ユーザーがコメントに <img src=x onerror=...> と書けば、変換後の HTML でそのまま実行されます。 |
ユーザーが書いた Markdown を表示するなら、変換後の HTML を必ずサニタイズしてください — DOMPurify.sanitize(marked.parse(input)) の順です。ライブラリ側の sanitize オプションに頼らないでください — marked のそれは非推奨を経てすでに削除されています。順序を間違えて「サニタイズしてから変換」すると意味がありません (エスケープされた文字列を Markdown が復元してしまうため)。サーバー側でも同じ処理を通す必要があります — ブラウザ側だけのサニタイズは、API を直接叩かれれば素通りです。 |
| テーブルが表にならない | テーブルは標準の Markdown には無い拡張記法で、GFM で追加されたものです。したがって対応していない環境では、パイプ記号がそのまま並んだ 1 つの段落として表示されます。対応している環境でも条件は厳しく、ヘッダ行とその下の区切り行 (|---|---|) の列数が一致していないと、テーブルとして認識されません。区切り行のハイフンは 3 つ以上必要な実装もあります。直前に空行が無い場合も、前の段落の続きと見なされて表になりません。 |
まず区切り行の列数を数えてください — ここが 1 つずれているだけで表になりません。行末のパイプは省略できますが、迷うなら全行の先頭と末尾に | を付けてください — 見た目で列数を数えられるので、間違いに気付きやすくなります。より根本的な話として、Markdown の表は生テキストで読めなくなった時点で Markdown を使う意味を失います — 列が 5 つを超える、セルが長文になる、といった段階になったら表をやめて箇条書きにするか、HTML の <table> を直接書くほうが結果的に読みやすくなります。 |
コードブロックの言語名はハイライターごとに認識する名前が違います。js と javascript はたいてい同義ですが、シェルは sh / bash / shell / console で挙動が変わり、console はプロンプト記号 ($) を色分けの対象から外すため、コピー用のコマンドを載せるときはこちらが読みやすくなります。言語名を書かないとハイライトが効かないだけでなく、GitHub では差分の色分けにも影響します。最後に、Markdown を書くときの原則として — Markdown の価値は「変換しなくても読める」ことにあります。太字と斜体と見出しを重ねた結果、生テキストが記号だらけで読めなくなっているなら、それは Markdown の使い方を間違えています。装飾が必要なほど複雑な文書は、Markdown ではなく別の形式で書くべき文書です。
📖 使い方
-
1
Markdown を入力左側のエディタに Markdown を入力またはペーストします。サンプルボタンで典型例もすぐに読み込めます。
-
2
リアルタイムプレビューを確認右側に GitHub 風スタイルで HTML がレンダリングされます。見出し・表・タスクリスト・コードブロックに対応。
-
3
HTML としてコピーHTML タブに切替えてコピーすれば、ブログや CMS にそのまま貼り付けられます。
❓ よくある質問
GitHub Flavored Markdown 対応?
HTML タグは使えますか?
Math (LaTeX) は対応していますか?
入力データはどこに保存されますか?
🐛 このツールで問題が発生しましたか？
完全無料・登録不要。再現手順だけでも結構です。届いたご報告は運営者に直接届き、修正の参考にします。
ご報告ありがとうございます！
運営者に届きました。改善の参考にさせていただきます。