DevToolPal
日本語

Markdown プレビュー

Markdown を書きながら GitHub Flavored Markdown でリアルタイムにプレビューし、生成された HTML をコピーできます。

ローカルで処理、アップロードなし

オプション

表示

Markdown

0 文字 · 0 B

プレビュー

結果はここに表示されます

何ができるか

Markdown プレビューは、リアルタイムで結果を確認できる Markdown エディターです。左側に入力すると、見出し、リスト、リンク、画像、テーブル、コードブロック、引用などのレンダリング結果が右側に即座に表示されます。README、リリースノート、ブログ記事、ドキュメントをコミット前に下書きしたり、複雑なテーブルや入れ子のリストがどう見えるかを確認したりするのに便利です。

表示を HTML に切り替えると生成されたマークアップを確認でき、そのままコピーしたり、基本的なスタイル付きの完全な HTML ページとしてダウンロードしたりできます。

使い方

  1. 入力欄に Markdown を入力または貼り付けるか、.md ファイルをドロップするか、サンプル をクリックします。
  2. 入力に合わせてプレビューが更新されます。プレビュー上部の行には、語数・見出し数・リンク数が表示されます。
  3. プレビュー を選ぶとレンダリングされたページを、HTML を選ぶとマークアップを表示します。
  4. HTML をコピー で結果を CMS やメールに貼り付けられます。単独のファイルが必要なら HTML をダウンロード を使います。

Markdown チートシート

入力結果
# Titleレベル 1 の見出し(レベル 2 は ##、###### まで)
**bold** と _italic_太字 と 斜体
[text](https://example.com)リンク
![alt](image.png)画像
- item または 1. item箇条書きリストまたは番号付きリスト
- [ ] todoタスクリストのチェックボックス(GFM)
`code`インラインコード
単独の行に ```js言語指定付きのコードフェンス
> quote引用ブロック
---水平線

テーブルはパイプと区切り行を使います。| a | b | の次の行に | --- | --- | を書きます。テーブルは CommonMark ではなく GitHub Flavored Markdown の拡張機能なので、GitHub Flavored Markdown がオンのときだけ表としてレンダリングされます。オフにすると、パイプを含むただのテキストとして表示されます。

例

## Highlights

- [x] Tables and task lists
- ~~Old API~~ removed

これは、レベル 2 の見出しに続いて、チェック済みのタスク項目と取り消し線付きの行としてレンダリングされます。

よくある質問

› どの Markdown 記法に対応していますか?

CommonMark に加えて GitHub Flavored Markdown(テーブル、タスクリスト、取り消し線、コードフェンス、自動リンク)に対応しています。GFM をオフにすると、厳密な CommonMark レンダラーでどう表示されるかを確認できます。

› HTML を含む Markdown を貼り付けても安全ですか?

はい。Markdown では生の HTML を書けるため、プレビューはスクリプトが実行されないサンドボックス化されたフレーム内に表示されます。ただし、コピーした HTML はサニタイズされていないので、信頼できないコンテンツを自分のサイトで公開する前には必ず無害化してください。

› 1 回の改行で新しい行にならないのはなぜですか?

標準の Markdown では、単独の改行はスペースとして扱われ、空行で新しい段落が始まります。「改行を <br> にする」をオンにすると、GitHub のコメントと同じようにすべての改行が改行として表示されます。

› 入力したテキストは保存されますか?

最後の入力はこのブラウザのローカルストレージに保存されるので、再読み込みしても消えません。アップロードされることはなく、「クリア」ボタンで消去できます。