TECMAH BLOG V2
VSCodeでクリップボードの画像をそのままMarkdownに貼り付ける方法
この記事では、VSCodeでクリップボードの画像をそのままMarkdownに貼り付ける方法を詳しく説明します。これは、2023年7月時点の情報です。 公式でいつの間にかクリップボードの画像をMarkdownのファイルに貼り付けることができるようになっていました。 詳しく調べてみると2023年5月のアップデートで正式に採用されたみたいです。
目次
VSCodeの設定
VSCodeに以下の設定を追加することで、クリップボードの画像をそのままMarkdownにペーストできるようになります。
自分は大体assetsフォルダの中にimagesを入れるのでassets/images/で設定しています。
// settings.json
{
"markdown.experimental.copyFiles.destination": {
"**/**/*": "assets/images/"
},
}
jsonで設定しない場合も紹介します
markdown.copyFiles.destinationで設定することになるので、左下の歯車⚙️マークから設定に飛びます。
その後出てきた検索バーにmarkdown.copyまで打ち込めば出てきます。
項目の追加で
項目**/**/* 値assets/images/
を入力します。
Macでのペーストの例
Mac上でペーストすると、次のようになります。
画像は自動で images フォルダ内に連番で保存されます。スクリーンショット入りのドキュメントを書く際にとても便利な機能です。
設定方法の詳細
ドロップまたは貼り付けによって作成されたファイルをコピーするする場所を定義できます。 次の変数を使用できます
${documentFileName} — Markdown ドキュメントの完全なファイル名。例: readme.md。
${documentBaseName} — Markdown ドキュメントのベース名。例: readme。
${documentExtName} — Markdown ドキュメントの拡張子 (例: md)。
${documentDirName} — Markdown ドキュメントの親ディレクトリの名前。
${documentWorkspaceFolder} — Markdown ドキュメントのワークスペース フォルダー。
例: /Users/me/myProject。
ファイルがワークスペースに含まれていない場合、これは ${documentDirName} と同じです。
${fileName} — ドロップされたファイルのファイル名。例: image.png。
また正規表現も使用できます。 慣れていない人には難しいかもしれませんのでここで説明しておきます。
正規表現（Regular Expression）は、文字列のパターンを表現するための強力なツールです。 ディレクトリの場所を表現するために正規表現を使用する場合、以下のようなパターンが一般的にあります。
.*：これは任意の文字（.）が0回以上（*）繰り返すパターンを表します。
[^/]*：これはスラッシュ以外の任意の文字（[^/]）が0回以上（*）繰り返すパターンを表します。
つまり、スラッシュを含まない任意の文字列（つまり、ディレクトリ名）にマッチします。
[^/]*$：これはスラッシュを含まない任意の文字列（[^/]*）が行の終わり（$）にあるパターンを表します。
つまり、パスの最後の部分（つまり、最後のディレクトリ名またはファイル名）にマッチします。
これらの正規表現は、ディレクトリの場所を表現するための基本的なパターンです。
注意点
この設定はexperimentalなものなので、将来的にどうなるかは不明です。もし使えなくなった場合でも、画像のコピペは別ツールの Obsidian や MarkText の同等機能で代替可能です。
画像圧縮を行うには
Microsoftのlearn-imagesというVSCode拡張を使うと、フォルダ内の画像をまとめて縮小・圧縮できます。
コンテキストメニューにフォルダ内の画像を圧縮する項目が追加されます。
実行すると、大きな画像を適切なサイズに縮小してくれます。
この拡張機能は Microsoft Learn の編集者向けツール vscode-docs-authoring の一部として提供されています。
以上、VSCodeでクリップボードの画像をそのままMarkdownに貼り付ける方法についての説明でした。 この機能を活用して、より効率的なmarkdownの作成を行ってみてください。