Markdownプレビュー
MarkdownをHTMLとしてリアルタイムでプレビュー
Markdownドラフト
ライブプレビュー
Markdownプレビューとは？
Markdownプレビューは、Markdownのソースコードが HTMLに変換された際にどのように表示されるかをリアルタイムで確認できるレンダリングツールです。左側に生のMarkdownを入力すると、右側のパネルに即座にレンダリングされた結果が表示されます。この即時視覚フィードバックにより、見出しの見え方、リンクの動作確認、コードブロックの表示方法、表の構文が正しいかどうかを、エディターを離れることなく確認できます。GitHubにコミット・プッシュしなくてもドキュメントの外観を確認でき、執筆ワークフローに即時フィードバックをもたらします。
CommonMarkは、ほとんどのプレビューツールが準拠するMarkdownの標準仕様です。このツールはCommonMark準拠のパーサーを実装しているため、プレビューで確認した内容はCommonMark対応の任意のプラットフォームでの表示と一致します。タスクリスト、取り消し線、自動リンクなどGitHub固有の機能については、GitHub Flavored Markdownの拡張機能もサポートしています。
プレビューツールはMarkdownを使うすべてのコンテンツ作成者にとって非常に役立ちます。ドキュメントを執筆するテクニカルライターは、複雑なネストリストやコードブロックの書式を確認できます。OSSメンテナーはREADMEの機能比較表が正しくレンダリングされるか確認できます。開発者はコミットメッセージやPRの説明を送信前に正しく書式設定できます。ブロガーは読者が見るのと同じ形で文字の強調やレイアウトを確認できます。即時フィードバックにより、コンテンツ作成が速まり書式のサプライズもなくなります。
Markdownプレビューの使い方
以下の手順に従って、MarkdownをHTMLとしてリアルタイムでプレビューしてください。各ステップはこのページの実際のボタンやパネルを使用します。
貼り付け、アップロード、またはサンプルの読み込み
左側のMarkdownドラフトパネルにMarkdownを入力または貼り付けるか、アップロードをクリックして.mdファイルを読み込んでください。サンプルをクリックするとサブスクライバーAPIドキュメントの例を確認できます。CommonMarkとGFM（表、タスクリスト、コードブロック）に対応しています。
ライブプレビューを確認する
右側のライブプレビューパネルは入力に合わせてリアルタイムで更新されます。見出し、リスト、表、コードブロックのレンダリング結果を確認できます。遅延なし—即時フィードバック。
HTMLをコピーまたはダウンロード
HTMLをコピーまたはHTMLをダウンロードをクリックして出力を利用してください。クリアで最初からやり直せます。すべての処理はブラウザ内で行われます。
実際の使用シーン
ドキュメントの執筆・編集
GitHubリポジトリ、ReadTheDocsプロジェクト、MkDocsやHugoで構築されたドキュメントサイトはすべてMarkdownを使用します。プレビューツールを使えば、ビルドやデプロイを待たずにドキュメントを下書き・完成させることができます。チュートリアル、APIドキュメント、ガイドがバージョン管理にコミットする前にどのようにレンダリングされるか確認できます。
GitHub IssueとPRの作成
詳細なGitHub Issueやプルリクエストの説明を書く際、プレビューツールで完璧に書式設定できます。表が正しくレンダリングされているか、コードブロックの構文ハイライトが適切か、提出前に書式がプロフェッショナルかどうかをプレビューで確認できます。複数のセクション、リスト、コード例を含む複雑なPR説明では特に効果的です。
リリースノートとChangelogの作成
ソフトウェアのリリースには明確で整形されたリリースノートが必要です。Markdownプレビューを使って、適切な書式、バージョンヘッダー、機能一覧、破壊的変更の警告を含むChangelogを下書きできます。リリースに追加する前にChangelogが分かりやすくスキャンしやすい形になっているか確認できます。プロフェッショナルなChangelogは洗練された印象を与えます。
よくある質問（FAQ）
プレビューはどこでも同じように表示されますか？
このプレビューはCommonMark準拠のパーサーとGitHub Flavored Markdown拡張を使用しているため、ほとんどのモダンなプラットフォームでの表示を正確に再現します。ただし、一部のプラットフォームはカスタムスタイルや独自の拡張機能を持っています。たとえばGitHubのWebインターフェースは生のHTMLプレビューには反映されないカスタムCSSを追加しています。正確な見た目の一致が必要な場合は、対象プラットフォームのドキュメントを確認してください。
どのMarkdown拡張機能がサポートされていますか？
このプレビューはCommonMark基本構文に加え、GitHub Flavored Markdown拡張（表、タスクリスト（- [ ] 項目）、取り消し線（~~テキスト~~）、自動リンク、メンション構文）をサポートしています。一部のカスタムHugoショートコードやPandoc拡張など、すべてのMarkdownフレーバーには対応していませんが、最もよく使われる機能をカバーしています。
生成されたHTMLをコピーできますか？
はい。「HTMLをコピー」をクリックすると、レンダリングされたHTMLがクリップボードにコピーされます。HTMLエディター、メールクライアント、HTMLを受け付けるWebフォームに貼り付けることができます。HTMLはクリーンで意味的に正しく、Markdownのパース結果から直接生成されます。Markdownをネイティブでサポートしないシステム向けのメール、Webページ、コンテンツ作成に便利です。
特殊文字は出力で正しくエスケープされますか？
はい。パーサーはテキストコンテンツ内のHTML特殊文字（&、<、>、"、'）を自動的にエスケープするため、インジェクション攻撃やレンダリングエラーを防ぎます。Markdownに通常のテキストとしてこれらの文字が含まれている場合、HTML構造を壊すことなくレンダリング出力に正しく表示されます。必要な場合はMarkdown内でHTMLエンティティを直接使用することもできます。
改行はどのように処理されますか？
CommonMarkのルールに従います。ソース内の単一の改行は出力ではスペースになります。実際の改行（<br>）を作成するには、行末に2つのスペースを置いてから改行するか、改行の前にバックスラッシュを使用してください。段落区切りには空白行（2つの連続した改行）を使用します。詳細な例はCommonMark仕様を参照してください。
MarkdownにHTMLを含めることができますか？
はい。MarkdownではHTMLブロックやインラインHTMLを使用できます。Markdown内にHTMLを直接書くと、それがそのまま出力に含まれます。Markdownがネイティブでサポートしない機能に便利です。ただし、ソースの移植性と可読性が下がります。HTMLは控えめに使用してください。ドキュメントやコンテンツであれば通常Markdown構文で十分です。