Markdown はプレーンテキストのままでも読めるように設計されていますが、最終的な見た目はやはり確認したいものです。表がきちんとそろっているか、リストが正しく入れ子になっているか、コードブロックがハイライトされているか。リアルタイムプレビュー なら、表示結果をソースの横に並べ、キーを押すたびに更新してくれます。
このガイドでは、Markdown をプレビューする代表的な方法を比較し、日々の作業で差が出る機能を挙げたうえで、ローカルのファイルをブラウザーで開く手早いワークフローを紹介します。インストールは不要で、ファイルをサーバーに送ることもありません。
Markdown をプレビューする 3 つの方法
1. コードエディター内のプレビュー
VS Code、JetBrains の IDE をはじめ、多くのエディターには Markdown のプレビュー機能が組み込まれています。普段からそのエディターを使っているなら良い選択肢です。欠点は、エディターのインストールが必要なこと、数式や図には拡張機能が必要になることが多いこと、そして README.md を読みたいだけの同僚に気軽に勧められるものではないことです。
2. オンラインの Markdown プレビューアー
左にエディター、右にプレビューがある Web サイトは、いちばん手軽な選択肢です。タブを開いてすぐに入力を始められます。ただし、オンラインツールの中身はさまざまです。表示のためにテキストをサーバーに送信するもの、断りなくブラウザーにドキュメントを保存するもの、そして基本的な記法しか対応していない（表もタスクリストも数式もない）ものも少なくありません。
3. セルフホスト型のプレビューアー
自分でホストする静的 Web アプリなら、Web サイトの手軽さと完全なコントロールを両立できます。自分のドメインで動き、チーム全員に同じ見た目で提供でき、何ができて何ができないかを自分で決められます。この方法については Markdown エディターをセルフホストする方法 で詳しく解説しています。
Markdown プレビューアーの選び方
使い心地はプレビューアーによって大きく違います。毎日使うようになると、次の機能が効いてきます。
- 即時レンダリング。 「表示」ボタンを押したり、目に見える遅延があったりせず、入力中にプレビューが更新されること。
- スクロール同期。 長いドキュメントでは、プレビューがエディターに追従し、編集中の段落が常に右側に見えている必要があります。
- GitHub-Flavored Markdown。 表、タスクリスト、取り消し線、脚注、アラートが GitHub と同じように表示されること。これらがよくわからない場合は Markdown チートシート をご覧ください。
- 使っている言語の コードハイライト。
- 技術文書を書くなら 数式と図：LaTeX の数式 と Mermaid 図。
- ローカルファイルを開けること。 単一ファイル、複数ファイル、フォルダーごとのドラッグ＆ドロップに対応し、ドキュメントが参照する画像も表示できること。
- エクスポート。 ドキュメントが完成したら、たいてい HTML、PDF、またはきれいな
.mdファイルが必要になります。 - ローカル処理。 テキストはブラウザー内で表示され、パソコンの外に出ないのが理想です。社内ドキュメント、契約書、下書き、メモなどでは特に重要です。
Markdown Preview Editor を使った手早いワークフロー
Markdown Preview Editor は、まさにこのリストを軸に作られた無料・オープンソースのエディターです。典型的な使い方を見てみましょう。
ステップ 1：エディターを開く
オンライン版 または自分でホストしたコピーを開きます。登録もインストールも不要です。インターフェースは 15 言語に対応し、ブラウザーの言語に自動で合わせます。
ステップ 2：ファイルを開く
.md ファイルをエディターにドラッグします。複数のファイルを一度に、あるいはフォルダーごとドラッグすることもできます。ドキュメントはそれぞれ専用のタブで開き、元に戻す履歴もタブごとに保持されます。ドキュメントと一緒にドロップした画像、音声、動画は、ドロップしたフォルダーから相対パスが解決されるため、プレビューに表示されます。
キーボード派なら、Ctrl+O（Mac では ⌘O）でファイルを選ぶか、フォルダー ボタンでディレクトリを開きましょう。
ステップ 3：プレビューを横に並べて書く
左のエディターに入力すると、右のプレビューがすぐに更新され、一緒にスクロールします。書式ツールバーから見出し、リスト、リンク、表、コードブロックを挿入できます。脚注、アラート、数式、図といった使用頻度の低いツールは、折りたたみ式の 高度なエディター の行にまとまっているので、ツールバーはすっきりしたままです。
表示モードはワンクリックで 3 種類を切り替えられます：エディターのみ、分割表示、プレビューのみ。スマートフォンではレイアウトが自動で調整され、ツールバーは必要になるまで折りたたまれます。
ステップ 4：保存またはエクスポート
書き終えたら、ドキュメントを .md として保存するか、単体で動作する HTML ファイルとしてエクスポートするか、PDF に印刷します。詳しくは Markdown を HTML・PDF に変換する方法 の記事で解説しています。
ファイルはどこへ行くのか？
多くの Web ツールでは、テキストがアップロードされているかどうかを簡単には判断できません。便利な確認方法があります。ブラウザーの開発者ツールを開き、Network（ネットワーク）タブに切り替えて何か入力してみてください。入力中に新しいリクエストが表示されるなら、テキストがページの外に送られている可能性があります。
Markdown Preview Editor はすべてをブラウザー内で表示します。開いたファイルはローカルで読み込まれ、設定で このブラウザーにドキュメントを記憶 をオンにしない限り、ドキュメントは開いているタブの中にだけ保持されます。ドキュメント内の外部画像やリンクは許可するまで読み込まれないため、ファイルを開いただけで他のサーバーに接続することもありません。
プレビューを快適にするコツ
- 画像はドキュメントの近くに置く。
images/やassets/フォルダーにまとめ、相対パスでリンクしましょう。あとはフォルダーごとドロップすれば、すべて表示されます。 #の見出しはファイルに 1 つ。 エクスポートした HTML のタイトルになり、長いドキュメントも移動しやすくなります。- 行番号をオンにする。 ドキュメントを共同で作業するときに設定でオンにすると、「42 行目」のようなレビューコメントを追いやすくなります。
- 夜はダークモードで。 プレビューもエディターと一緒にテーマが切り替わります。
よくある質問
オフラインで使える無料の Markdown プレビューアーはありますか？
Markdown Preview Editor はドキュメントを完全にブラウザー内で処理します。任意の Web サーバーに自分用のコピーをホストしたり、Docker でローカルに動かしたりすることもできます。ページが読み込まれたあとは、表示処理がサーバーに依存することはありません。
画像付きの Markdown ファイルをプレビューできますか？
はい。Markdown ファイルを画像と一緒に、あるいはフォルダーごとエディターにドロップしてください。images/diagram.png のような相対パスの画像は、ドロップしたファイルから解決されます。
プレビューは GitHub と同じ見た目になりますか？
プレビューは GitHub スタイルの書式を使い、表、タスクリスト、脚注、アラートを含む GitHub-Flavored Markdown に対応しているため、GitHub での表示にかなり近い見た目になります。
複数の Markdown ファイルを同時に開けますか？
はい。ファイルはそれぞれ専用のタブで開き、開いている .md ファイルから別の .md ファイルへのリンクをクリックすると、そのタブに切り替わります。