VS Code + Markdown Preview Enhanced で Markdown を HTML にエクスポートする手順

新しい職場で手順書を書く機会がありました。

職場のカルチャーとしては
ドキュメントを共有する場合のファイル形式は Word / Excel / PDF が常識となっているような雰囲気があります。

一方で、自分自身の執筆体験としては Markdown + VS Code が一番しっくりきます。

そこで今回は

Markdown で書き、VS Code 上で確認し、そのまま HTML にエクスポートする

という、とてもシンプルで実用的な方法を整理します。

この記事でやること

• VS Code で .md ファイルをプレビューする
• Markdown Preview Enhanced を使って
• HTML ファイルとしてエクスポートする

前提条件

• VS Code がインストールされている
• 拡張機能 Markdown Preview Enhanced がインストール済み
• Markdown ファイル（.md）がすでにある

よくあるつまづきポイント

VS Code には 2 種類の Markdown プレビュー があります。

• 標準の Markdown Preview
• Markdown Preview Enhanced のプレビュー

見た目は似ていますが HTML エクスポートができるのは後者だけ です。

Markdown Preview Enhanced でプレビューを開く方法（確実）

1. .md ファイルをエディタで開く

まずは普通に Markdown ファイルを開きます。

2. コマンドパレットを開く

• macOS の場合 : Command + Shift + P
• Windows の場合 : Ctrl + Shift + P

3. 以下のコマンドを実行

Markdown Preview Enhanced: Open Preview

これで開いたプレビューは 必ず Enhanced 版 になります。

Enhanced プレビューかどうかの確認方法

プレビュー右上に以下が表示されていれば OK です。

• ···（三点リーダー）
• Export
• Open in Browser
• PDF

Export が見えた時点で正解です。

HTML としてエクスポートする

1. プレビュー右上の ··· をクリック

2. 以下を選択

Export → HTML (offline)

結果

• 同じフォルダに .html ファイルが生成される
• CSS や JS が すべて埋め込まれた単一 HTML
• 他の環境に渡しても崩れない

手順書用途にはとても扱いやすい形式です。

なぜ HTML (offline) が便利か

• ブラウザがあれば誰でも見られる
• レイアウトが安定している
• そのまま PDF 化しやすい
• いつか Word へ貼り付けることになっても構造が残りやすい

「執筆は Markdown、共有は HTML / PDF」という分業ができます。

まとめ

• VS Code には 標準プレビュー と Enhanced プレビュー がある
• HTML エクスポートしたい場合は Markdown Preview Enhanced: Open Preview を使う
• Export → HTML (offline) が一番扱いやすい

おわりに

最終成果物の形式と 自分が一番書きやすい形式 は、必ずしも同じでなくていいと思っています。

Markdown で気持ちよく書き、必要な形に変換して渡す。

VS Code と Markdown Preview Enhanced は、そのためのちょうどいい道具でした。

同じような状況の方の参考になれば幸いです。

---

この記事は、別のプラットフォームにも同内容を掲載しています。