PART 05 — ビューワーでの表示確認
シリーズ振り返りとまとめ

VS Codeのプレビューでは綺麗に見えていたのに、GitHubにpushしたら表示が微妙に崩れていた、という経験から「公開先での見た目まで確認する」習慣がつきました。最終回はその確認作業を整理します。

VS Codeプレビューでの見え方（振り返り）

PART 02で解説した通り、VS CodeではCtrl + K → Vで横並びプレビューを開けます。 見出し・強調・リスト・表といった基本記法（PART 02）、コードブロックのシンタックスハイライト（PART 03）、そしてMermaidのフローチャート（PART 04）まで、拡張機能を1つ入れるだけで一貫してリアルタイムに確認できることが、本シリーズでVS Codeを基準とした最大の理由でした。

特にMermaidのように「保存した瞬間に図が再描画される」体験は、一度慣れると手放せなくなります。文章とコードと図をすべて同じエディタ・同じショートカットで確認できる点が、複数のツールを行き来する場合と比べて執筆のリズムを崩さない大きな要因です。

GitHub上でのレンダリング結果

記事や README を実際にGitHubへpushすると、GitHub側の独自レンダラーによってMarkdownが表示されます。基本記法・コードブロックのシンタックスハイライト・Mermaidのフローチャートは、GitHubでも標準でサポートされているため、VS Codeプレビューとほぼ同じ見た目で表示されます。

ただし、フォントや余白などの細かいスタイルはビューワーのCSSに依存するため完全に同一にはなりません。表やコードブロックの横幅で改行位置がずれることもあるため、公開直前には必ず実際の公開先でも一度表示を確認することをおすすめします。

特に日本語の文章は、英語に比べて1文字あたりの幅が広いため、表のセル内で折り返し位置が想定と変わりやすい傾向があります。長い日本語の文をそのままセルに詰め込まず、箇条書きに分割するなど、どのビューワーでも崩れにくい書き方を意識すると安全です。

その他のビューワーでの注意点

社内Wikiや静的サイトジェネレータ（本サイトのような技術ブログもこれにあたります）でMarkdownを公開する場合、使用しているMarkdownパーサーによって対応状況が異なります。

まとめ — シリーズ振り返りと早見表

PART	内容
01	エディタツールの○×比較と、VS Code＋Mermaidを基準にする理由
02	Mermaid対応拡張機能の導入と、基本記法の早見表
03	インラインコードとコードブロック、シンタックスハイライト
04	Mermaidによるフローチャートの書き方と表示確認
05（本記事）	ビューワーでの表示確認とシリーズ全体のまとめ

Markdownは記法自体を覚えるコストは小さいものの、「どのエディタで書き、どこで表示を確認し、最終的にどこへ公開するか」を最初に整理しておくことで、記事執筆の手戻りを大きく減らせます。 本シリーズがそのための一つの型として役立てば幸いです。

今後、別のツールでMarkdownを書く機会があっても、本シリーズで扱った「基本記法→コードブロック→拡張記法（Mermaid）→ビューワー確認」という考え方の順序自体は流用できます。 エディタや拡張機能の名称が変わっても、確認すべきポイントは大きく変わらないはずです。