VSCodeのMarkdownのpreviewでHexoの画像を表示したい

この記事はHexo時代の記事です。 現在のブログとは見た目や機能が異なる可能性があります。

結論

今は無理。 ただし、asset folderを使ってる人はワンチャンあるかも。

hexoの画像指定の仕方

hexoのmarkdownで画像指定するときって↓みたいにパスを指定する。

![gazo](/images/hoge.webp)

これを hexo generate で変換したhtmlがざっくり↓になる。

<img src="/images/hoge.webp" alt="gazo" />

いわゆるルート相対パス(Root Relative Path) で表現されるわけ。

generate 時に画像ファイルもこのパスへコピーされる。 これで、ブラウザでは正しく画像が表示できる。

VSCodeのmarkdown previewでも画像表示したい

ところが、VSCodeのmarkdown previewで画像表示しようとそうはいかない。 原因はrootディレクトリがworkspaceディレクトリになるせい。 ファイルツリーは↓。

workspace
┗ source
  ┣ _posts
  ┃ ┗ kiji.md
  ┗ images
    ┗ hoge.webp

images/hoge.webp は source の下にいるので、パスが合わない。

VSCodeの拡張でなんとかならない?

ならない 。

markdown preview enhanced

まず、おなじみ markdown preview enhanced 。 残念ながら、該当設定無し。

image_dir ってのがソレかと思ったけど、 これは画像をコピペしたときに画像ファイルを保存するディレクトリを指定するものだった。

vscode-hexo-utils

続いて、 vscode-hexo-utils 。 これは惜しい。 ↓の記述があるので、asset機能を使ってるとプレビューできるようだ。

Preview image with assets folder

当ブログではasset機能は無効で運用してるので使えなかった。 残念。

VSCodeの設定でなんとかならない?

ならない 。

ドンピシャな設定についての Issue があった。

however the path that you specify in the markdown of the post for the image is /image.png as the static folder serves as the root for image files.

It'd be nice to have a config option for the markdown preview, that'd allow you to set the image root, so that you could specify the root to be project_root/static

hexoと同じSSGであるHUGOユーザからのリクエストみたい。 画像のrootディレクトリを変える設定がほしいとのこと。 ﾔｯﾊﾟﾎｼｲﾖﾈｰ。

残念ながら、IssueはOpen状態なので未実装。 upvoteが一定数以上ついたので、 将来的な機能候補として挙がったようだ。 対応されるまで待つっきゃない...。

まとめ

• VSCodeのmarkdownのpreviewでhexoの画像を表示したい
  • 今は無理
    • 将来的にはVSCodeの設定で対応されるかも
  • asset機能を使ってる人は vscode-hexo-utils を試すとできるかも