photo credit: marfis75 decisions ( #cc ) via photopin (license)
みなさん、こんにちは！
タカハシ(@ntakahashi0505)です。
ノンプログラマー向けにVS Codeを使ってMarkdownで技術書を執筆する方法についてお伝えするシリーズです。
前回の記事はこちらです。
Markdown文書をVS Codeで作成するときに便利な拡張機能Paste ImageとCharacterCountについて紹介しました。
今回は、Windowsで相対パスをコピーするときのやっかいな問題を解決してくれる拡張機能Copy Relative Path Posixを紹介します。
では、行ってみましょう！
Windows版VS Codeで相対パスをコピーするときの問題点
Markdownによる執筆で、文書に画像を挿入したいときは、以下のように画像ファイルのパスが必要です。
VS Codeでは、Explorer上のファイルを右クリックしたメニューから「Copy Relative Path」を選択することで、簡単にその相対パスをコピーできます。
しかし、Windowsの場合、ここでコピーできるパスに使われる記号がスラッシュ(/)ではなくて、バックスラッシュ(\)（または円記号）になってしまうんです。
ローカルでプレビューを見る分にはそれでもいいのですが、例えばGitHubにプッシュしたときには困ったことが起きてしまいます。
以前の記事の作成の際に発生した事例を紹介します。
VS Codeで画像ファイルの相対パスを取得したものを、そのまま使用して「fig\fig01-01.png」となっていました。
これをGitHubでプッシュして確認すると、以下のようにリンク切れで画像がプレビュー表示されなかったのです。
つまり、GitHubではバックスラッシュ(\)（または円記号）で表現された相対パスは受け入れてもらえないのです。
これでは、レビュワーがチェックできなくて困っちゃいますよね。
拡張機能Copy Relative Path Posixとは
前回の記事で紹介した拡張機能Paste Imageでは設定でスラッシュ(/)による相対パスが挿入されるので、この問題は回避できます。
ただ、フォルダ内の画像ファイルを直接挿入したいときには、いちいち置換するのは面倒…
そこで、登場するのが今回紹介する拡張機能Copy Relative Path Posixです。
この拡張機能は、右クリックメニューにスラッシュによる相対パスをコピーできるメニューを追加してくれます。
Copy Relative Path Posixのインストール
Copy Relative Path Posixのインストールも他の拡張機能と同様です。
アクティビティバーの「Extensions」から「copy relative path posix」などで検索して、「Install」です。
スラッシュによる相対パスのコピー
では、スラッシュによる相対パスのコピーの方法を見ていきましょう。
Copy Relative Path Posixのインストール後に、Explorerのファイルを右クリックすると、以下のように「Copy Relative Path (Posix)」というメニューが追加されています。
これによりコピーされた相対パスを貼り付けると、以下のように「fig/neko.jpg」つまりスラッシュを使ったパスになっていることが確認できます。
基本的にこちらを使えば安心ですね。
まとめ
以上、Windowsでスラッシュを使った相対パスをコピーしてくれる拡張機能Copy Relative Path Posixを紹介しました。
これで、安心してMarkdown文書に画像を挿入できるというもの…どうぞご活用くださいね！
