Markdownプレビュー
無料のMarkdownプレビュー。Markdownを入力すると安全にHTML表示し、生成したHTMLをコピーできます。
ブラウザでMarkdownをプレビュー
左側にMarkdownを書くと、右側で表示結果をすぐ確認できます。見出し、強調、リンク、リスト、引用、区切り線、コードブロックに対応しています。
生HTMLはエスケープして表示するため、貼り付けた内容からスクリプトが実行されることはありません。
使い方
- Markdownを入力する 左側のエディタに書くか貼り付けると、すぐにプレビューが更新されます。
- 表示を確認する 公開前に見出し、リンク、リスト、コードの見え方を確認します。
- 必要ならHTMLをコピーする 対応するエディタ向けに安全な生成HTMLをコピーできます。
使いこなすためのヒント
- 3つのバッククォートで囲むと、コードを整形したまま表示できます。
- 安全のため、生HTMLは実行せず文字として表示します。
こんなときに使えます
READMEを書きながら確認するとき
書き手の環境とGitHubの表示が一致するとは限りません。 投稿前に見え方を確かめられます。
表や入れ子のリストを整えるとき
記号の位置やインデントの深さで結果が変わる箇所は、目で見て直すのが早道です。
記事をHTMLに変換して持ち出すとき
生成されたHTMLをそのままコピーできます。 CMSへ貼り付ける前の下書きに使えます。
人に渡す資料をPDFにするとき
Markdownで書いた手順書やメモを、そのまま配れる形に整えられます。
記法を覚えながら書くとき
入力と結果が並ぶので、どの記号が何になるのかを試しながら身につけられます。
Markdownの用語
- Markdown
- 記号を使って見出しや強調を表す軽量な記法です。単一の公式仕様は存在せず、処理系ごとに差があります。
- CommonMark
- 曖昧だった仕様を厳密に定め直した規格です。多くの実装がこれを土台にしています。
- GitHub Flavored Markdown
- CommonMarkに表・打ち消し線・タスクリストなどを足した拡張です。GitHub上での見え方はこれに従います。
- 改行の扱い
- 多くの処理系では、1回の改行は段落内の改行になりません。 行末に空白2つを置くか、空行を挟みます。
- フェンスコードブロック
- バッククォート3つで囲んだ範囲です。言語名を添えると、GitHub などでは色分けが効きます（このプレビューは色分けをせず、mermaid と書いた場合だけ図として描画します）。
- サニタイズ
- 貼り付けたHTMLから危険な要素を取り除く処理です。このプレビューは安全に表示するためこれを行います。
よくある質問
いいえ。描画とコピーはすべてブラウザ内で行われます。
いいえ。生HTMLはエスケープされ、文字として表示されます。
CommonMark と GitHub Flavored Markdown（表・打ち消し線・タスクリスト・URLの自動リンク）に沿って変換します。見出し・強調・リンク・画像・入れ子のリスト・引用・区切り線・コードブロックなどに対応しています。
公開前にプレビューする理由
Markdownは書きやすい一方、記号を一つ落とすだけでページ構造が変わることがあります。ライブプレビューなら、README、Issue、Wiki、CMSへ貼り付ける前に見出しやリンクを確認できます。
このツールは任意のHTMLを実行するのではなく、安全な一般的記法を優先しています。自分で書いた原稿だけでなく、信頼できない場所からコピーした文章の確認にも使えます。