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つで囲んだ範囲です。言語名を添えると色分けが効きます。
- サニタイズ
- 貼り付けたHTMLから危険な要素を取り除く処理です。**このプレビューは安全に表示するためこれを行います。**
よくある質問
いいえ。描画とコピーはすべてブラウザ内で行われます。
いいえ。生HTMLはエスケープされ、文字として表示されます。
見出し、強調、リンク、リスト、引用、区切り線、コードブロックなどの一般的な記法に対応します。
公開前にプレビューする理由
Markdownは書きやすい一方、記号を一つ落とすだけでページ構造が変わることがあります。ライブプレビューなら、README、Issue、Wiki、CMSへ貼り付ける前に見出しやリンクを確認できます。
このツールは任意のHTMLを実行するのではなく、安全な一般的記法を優先しています。自分で書いた原稿だけでなく、信頼できない場所からコピーした文章の確認にも使えます。