📸

VSCodeでZennの記事を執筆するとき簡単にスクショを貼り付ける

2023/01/12に公開

はじめに

Zennの記事を執筆するときにスクショの貼り付けが面倒だなと思ったので調べた解決法を備忘録として残します。

Paste ImageはVSCodeのエクステンションで、クリップボードからMarkdownへの貼り付けを可能にします。
貼り付けする際は Ctrl+Alt+V (Cmd+Alt+V on Mac) でペーストします。

ところでZennでは画像ファイルを以下の配置ルールに則って管理するため、貼り付けされる際にはこのルール通りに保存される必要があることに注意します。

画像ファイルはリポジトリ直下の /images ディレクトリに配置します。 /images ディレクトリの中の構造に制限はありませんが、拡張子だけはチェック対象となります。

配置ルール

.
├─ articles
│  └── example-article-1.md
└─ images
   ├── example-image1.png
   └── example-article-1
       └─ image1.png

ということで、上記ルールに沿うように設定を変更しましょう。

設定画面
当該のエクステンションの説明ページを開き、歯車マークで開いたメニューから Extension Settingをクリックして設定画面を開きます。
設定範囲の設定
この設定はZennの記事執筆向けの設定になりますので、Workspace を選択し、ワークスペース独自の設定にすることをオススメします。
Base Path
以下の設定に変更します。

${projectRoot}

なお、ルールに沿う限り、以下の説明を元に適当な設定に変えても構いません。

${imageSyntaxPrefix}/${imageFilePath}${imageSyntaxSuffix}

なお、ルールに沿う限り、以下の説明を元に適当な設定に変えても構いません。

${imageFilePath}: the image file path, with pasteImage.prefix, pasteImage.suffix, and url encoded.
${imageOriginalFilePath}: the image file path.
${imageFileName}: the image file name with ext.
${imageFileNameWithoutExt}: the image file name without ext.
${currentFileDir}: the path of directory that contain current editing file.
${projectRoot}: the path of the project opened in vscode.
${currentFileName}: the current file name with ext.
${currentFileNameWithoutExt}: the current file name without ext.
${imageSyntaxPrefix}: in markdown file it would be ![](https://github.com/mushanshitiancai/vscode-paste-image/raw/master/, in asciidoc file it would be image::, in other file it would be empty string
${imageSyntaxSuffix}: in markdown file it would be ), in asciidoc file it would be [], in other file it would be empty string
Defalut is ${imageSyntaxPrefix}${imageFilePath}${imageSyntaxSuffix}

${projectRoot}/images/${currentFileNameWithoutExt}

なお、ルールに沿う限り、以下の説明を元に適当な設定に変えても構いません。

利用方法
以上の設定が終わったら、実際にスクショを取り ^[1]、 Ctrl+Alt+Vで貼り付けます。（Ctrl+Vでは貼り付けられないので注意）
なお、Imageフォルダを作成していなくても自動で作成されます。

最後に、最初で示したルールに従ってファイルが格納されていれば完了です。

脚注