Markdownをプレビューする方法｜GitHub・Qiita・Zenn風の表示を比較

1. Markdownのプレビューと投稿先の表示を区別する

Markdownでは「# 見出し」「**太字**」やバッククォート3つで囲むコードブロックなど、文字で書式を指定します。プレビューでは、記法を見出し・表・コードとして描画した状態を確かめられます。

Markdown Preview Labは一般的な記法を独自の描画処理で表示し、GitHub・Qiita・Zenn風の文字サイズや余白に切り替えます。3サービスの公式描画エンジンを実行しているわけではないため、細かな配置や独自記法の表示は異なる場合があります。

2. Markdownを入力するか、.mdファイルを読み込む

Markdown Preview Labを開きます。初回は記法を試せるサンプルが表示されます。白紙から書く場合は、サンプルを編集する前に「新規作成」を選びます。保存済みの下書きがあれば、代わりにその内容が復元されます。

PCでは左側にMarkdownを入力します。既存の.mdやテキストファイルはファイル選択またはドラッグ＆ドロップで読み込めます。「# タイトル」「## 見出し」「- 項目」と入力すると、右側のプレビューが更新されます。

スマホでは「編集」「プレビュー」「比較」の画面を切り替えます。小さな画面でも、入力と表示を交互に確認できます。

3. GitHub・Qiita・Zenn風の表示を切り替える

Preview AのスタイルからGitHub、Qiita、Zennを選びます。同じMarkdownのまま切り替えれば、文字サイズ、見出しの間隔、表などの見え方を比べられます。Standard、Minimal、Print、Custom CSSも用意されています。

GitHubへ公開するREADMEはGitHub風、Qiitaへ投稿する文章はQiita風で確認できます。表示は近似であり、各サイトの仕様変更を自動追跡するものではありません。

4. 比較モードで2つのプレビューを並べる

「表示」を「比較」に切り替え、Preview AとPreview Bに異なるスタイルを指定します。GitHub風とZenn風を選べば、同じ原稿の表示を並べて確認できます。

「スクロール同期」をオンにすると、編集欄と2つのプレビューが文書全体のスクロール割合に応じて連動します。行単位で正確に位置合わせする仕組みではありません。片方だけを確認したいときは同期をオフにします。

5. 互換性の警告で記法を見直す

互換度のパーセンテージと警告を確認します。独自ブロック、数式、HTML、タスクリストなど、投稿先によって扱いが異なる可能性のある記法を簡易チェックします。警告を押すと、Markdownの該当行へ移動できます。

たとえばZennの独自記法「:::message」は、ほかの場所へ貼り付けても同じように表示されるとは限りません。該当箇所を投稿先の公式プレビューで確認するか、別の書き方を検討します。

スコアはアプリ独自のルールによる目安です。高い数値でも完全な互換性は保証されず、警告のない記法にも表示差が残る場合があります。

6. 画像リンクと独自記法が表示されない場合

Markdownに外部画像のURLを書いても、このアプリはその画像を取得しません。通信を防ぐため、リモート画像はプレースホルダーで示されます。画像付き記事は、投稿先でも画像の読み込みや配置を確認してください。

数式や投稿先固有のブロックは、Markdown Preview Labで完全に再現できるとは限りません。アプリのプレビューに表示されないことと、投稿先がその記法に非対応であることは別です。

7. 長文の編集とキーボード操作

見出し、太字、斜体、リンク、コード、リストには入力補助があります。長い文章を書くときは編集欄の拡大アイコンで大きな編集画面を開けます。元の編集欄と内容は同期します。

PCではCtrl（Macは⌘）＋Bで太字、Ctrl（⌘）＋Iで斜体の記法を挿入できます。Tabは半角スペースを2個挿入し、元に戻す・やり直すも使えます。これらは既存の太字や斜体を解除する切り替え操作ではありません。

8. Markdown本文を.mdファイルへ保存する

出力ファイル名を指定して「保存」を押すと、Markdown本文が.mdとしてダウンロードされます。拡張子を入力していなければ.mdが補われます。Ctrl（Macは⌘）＋Sで保存することもできます。

Markdown本文をクリップボードへコピーすることもできます。保存対象は原稿のテキストであり、比較画面やプレビューの見た目をHTML・PDFとして書き出す機能ではありません。

ブラウザの自動保存は下書き用です。手元に残したい文章は、編集の区切りで.mdを保存しておくと、別のエディタでも開けます。

9. 自動保存、ローカル処理と制限を確認する

下書きはブラウザのlocalStorageへ自動保存されます。同じ保存領域で開けば復元できますが、サイトデータの削除、ブラウザの変更、別の閲覧モード、Web版とローカルHTML版の切り替えなどで見えなくなる場合があります。重要な原稿は.mdで別に保管してください。

編集、描画、互換性チェック、ファイルの読み書きはブラウザ内で処理します。実行時に外部ライブラリを取得せず、CSPでも外部接続を制限しています。Web版の最初のHTML取得には通信が必要ですが、入力したMarkdown本文をアプリがアップロードすることはありません。

非常に長い原稿では端末によってプレビューが重くなる場合があります。公開前には、実際のGitHub・Qiita・Zenn側で表示を確認してください。

注意点

• 投稿先の候補が2つあるときは、比較モードでその2種類を選ぶと違いを見つけやすくなります。
• 互換度スコアは合否ではありません。警告が出た行は実際の投稿先でも確認してください。
• 下書きの自動保存だけに頼らず、.mdを定期的に保存してください。
• 外部画像はプレビューではプレースホルダーです。画像付き原稿は公開先の画面で確認します。