• #vscode
  • #markdown
  • #productivity
  • #documentation
未分類

VS CodeのMarkdownプレビューでpublic画像のパスを正しく表示する方法

NuxtやNext.jsなどのフレームワークでは、静的画像（publicフォルダ内の画像）を /images/example.png のようなルート相対パスで指定することが一般的です。

しかし、VS Code標準のMarkdownプレビューは、ワークスペースのルート（プロジェクトの根元）を / として認識するため、apps/web/public のようなサブディレクトリにある画像を表示できません。

これを解決し、エディタ上でも画像を確認できるようにする主な手順をまとめます。

方法1: 拡張機能「Markdown Preview Enhanced」を使用する（推奨）

標準のプレビューよりも強力な「Markdown Preview Enhanced」を使用すると、プレビューのルートパスを設定できます。

手順

  1. VS Codeの拡張機能マーケットプレイスで Markdown Preview Enhanced (shd101wyy.markdown-preview-enhanced) をインストールします。
  2. Markdownファイルを開き、右上のプレビューボタン（虫眼鏡アイコン）ではなく、**右クリックメニューから「Markdown Preview Enhanced: Open Preview to the Side」**を選択します。
  3. これだけで表示される場合もありますが、表示されない場合は設定を変更します。
    • Ctrl + Shift + P (Macは Cmd + Shift + P) を押し、Preferences: Open Settings (JSON) を選択します。
    • 以下の設定を追加します：
"markdown-preview-enhanced.imageFolderPath": "/apps/web/public"

※ パスはご自身のプロジェクト構成に合わせて調整してください。

方法2: VS Code標準プレビューの設定を変更する（上級者向け）

標準プレビューを使いたい場合、Markdownのルート設定を変更することは難しいですが、ワークスペースの構成を工夫することで回避できる場合があります。しかし、設定が複雑になるため、基本的にはローカルサーバー（npm run dev）を立ち上げてブラウザで確認するのが最も確実で手軽な方法です。

まとめ

  • 手軽さ重視: ローカルサーバーを立ち上げてブラウザで確認する（設定不要、確実）。
  • エディタ完結重視: 「Markdown Preview Enhanced」拡張機能を導入する。

執筆時の確認作業を効率化したい場合は、方法1の導入を検討してみてください。