QuickATools

開発者ツール · Free browser tool

Markdown ライブプレビュー

Markdown 構文をリアルタイムで執筆・プレビュー。サーバーサイドのデータ追跡なしで、きれいな HTML を即座に可視化します。

Markdown editor

Split view · compact client-side parser · HTML is escaped before render.

Source

596 chars

Live preview

Markdown Live Previewer

Write GitHub-style notes, README drafts, or AI prompt guides and preview them instantly.

Why this helps

  • See headings, lists, and emphasis as you type
  • Check italics, bold, and strikethrough
  • Keep drafts private — nothing leaves your browser

Inline & block code

Use npm run build for a quick check, or a fenced block:

function greet(name: string) {
  return `Hello, ${name}!`;
}

Tip: Paste a README draft here before you push it.

Links

Read more about CommonMark when you need the full spec.

Frequently Asked Questions

Markdown とは何で、なぜ多くのドキュメントが使うのですか?

Markdown は、見出しの #、リストの * または -、**太字**、フェンス付きコードブロックなど単純なマーカーで構造化文書を書き、そのテキストを HTML に変換できるプレーンテキスト整形構文です。生のままでも読みやすく、git での diff がきれいで、GitHub README・Issue テンプレート・多くの静的サイトジェネレーターの標準です。

このプレビューアはどの Markdown 機能をサポートしますか?

日常の下書きに必要な実用サブセットをカバーします。ATX 見出し(h1–h3)、段落、太字/斜体/取り消し線、箇条書き・番号付きリスト、引用、インラインコード、フェンス付きコードブロック、水平線、http(s)/mailto リンク。意図的に CommonMark/GFM 全体エンジンではなくコンパクトなので、表やタスクリストなどの高度な拡張はバンドルを小さく保つため範囲外です。

ライブプレビューはコンテンツ生産性をどう高めますか?

コミットや CMS 公開のあとではなく、書いている最中に壊れたフェンス・ぎこちない見出しレベル・リスト整形を見つけられます。Visual Preview と HTML Source を切り替えると、タグの入れ子を当て推量せずブログ CMS やメールテンプレート用のレンダリング済みマークアップが必要なときにも役立ちます。

下書きはアップロードや保存されますか?

いいえ。パースとレンダリングはすべてブラウザ内で実行されます。入力中の生 HTML はプレビュー前にエスケープされ貼り付けたタグは実行できず、サーバーへも送られないため、内部ランブック・未公開 README 下書き・端末を離れてはいけない AI プロンプトガイドにより安全です。

ブラウザを離れずに README 下書きとプロンプトガイドをプレビュー

Markdown は GitHub README・Issue テンプレート・ブログ下書き・AI プロンプトライブラリの標準方言ですが、ソースだけでは見出し階層がきれいに読めるか、コードフェンスが閉じたか、リストが期待どおりにレンダリングされるかが見えにくいです。ライブプレビューはその当て推量を縮めます。片側に入力し、もう片側で構造化 HTML を見て、コミットや公開の前に整形を直します。

このプレビューアは意図的に軽量です。大きな Markdown エンジンを載せる代わりに、見出し・強調・リスト・引用・インライン/フェンス付きコード・安全なリンクといった実用サブセットを、コンパクトなクライアントサイドパーサーで変換します。下書き内の生 HTML は先にエスケープされるので、貼り付けた <script> タグはプレビュー枠で実行できません。

すべてローカルで動くため、未完成ドキュメント・内部ランブック・プロンプトガイドは端末を離れません。アカウント壁もアップロード手順もありません——ツールを開き、下書きを貼り、Visual Preview と HTML Source を切り替え、レンダリング済みマークアップをコピーするか .md ファイルをダウンロードしてください。

他の開発者ユーティリティと組み合わせてください。WCAG 色コントラストチェッカーでリンクや見出しのコントラストを確認し、JSON フォーマッター・バリデーターで JSON フロントマターを整え、正規表現テスターでドキュメント用正規表現をデバッグ。ドキュメント内のエンコード済みスニペットには Base64 エンコード/デコードを使ってください。