마크다운에 이미지 복사/붙여넣기
목차
개요
마크다운에서 이미지를 추가하는 방법은 참으로 복잡하다. 기본적으로 스크린샷 찍은 내용을 어딘가에 저장해 놓고, 해당 경로를 마크다운의 경로로 인식하여 확인한다. 해당 방법은 매우 귀찮기에 이를 자동화하는 방법을 찾아보았다.
특히 내 경우는 ssh로 접속하여 개발을 진행하는 경우가 많아 원격지에서 마크다운을 작성하는 일도 빈번하였다. 이러한 경우 로컬에서 찍은 스크린샷을 원격지로 갖다붙여야 하는 방법이 추가로 있는지도 확인해보았다.
방법
확장을 설치한다
Paste Image 라는 확장이 존재하였다. 해당 확장을 설치하면 vscode에서 스크린샷을 찍은 뒤 ctrl + alt + v를 누르면 이미지를 자동으로 저장하고 마크다운 이미지 형식으로 저장된 경로가 자동으로 붙여넣어진다.
remote-ssh 등과 같이 사용하는 것이 아닌 로컬 환경에서 사용하는 경우에는 본 확장만 설치하면 된다.
Remote Development 문제
그러나 문제가 있었다. 원격지 클립보드를 사용하기 때문에 로컬 (vscode가 위치한 클라이언트)에서 아무리 스크린샷을 찍고 복사를 해봐야 해당 사진이 원격지 경로에 저장되지 않았다.
Paste Image from local pc 해당 확장 추가 설치 해당 확장은 원격지에서 이미지를 저장할 때 로컬의 클립보드를 참조하게끔 하는 확장이다.
만약 xclip이 설치되지 않았다면 xclip도 같이 설치한다.
1
apt-get install xclip
확장을 설치하고 vscode를 리로드한 뒤 로컬에서 windows+shift+s로 스크린샷을 찍거나 이미지 파일을 열어 ctrl+c로 복사 후 vscode에서 ctrl+alt+v 키를 누르면 정상적으로 원격지에 이미지를 저장하고 경로를 붙여넣는다.
이미지가 저장될 경로를 설정한다
ctrl+alt+v 키를 누르면 이미지가 마크다운 파일이 있는 현재 경로에 yyyy-mm-dd-hh-mm-ss.png 형식으로 저장이 된다.
나는 이미지만 따로 관리하고 싶어 마크다운 파일과 같은 경로에 이미지를 생성하는 것이 아닌 특정한 디렉토리 안에 이미지를 넣고 관리하고 싶었다.
‘paste image’ 마켓 플레이스, ‘paste image from local pc’ 마켓 플레이스
확장마다 사용하는 변수가 달라 자신이 어떤 확장을 사용하는가에 따라 참조해야 하는 문서가 다르다.
나는 마크다운 파일과 같은 경로에서 dir_<markdown_filename>_img/img_yyyy-mm-dd-hh-mm-ss.png 형식으로 저장하게끔 만들었다
local의 settings.json에 아래와 같이 설정한다.
1
2
3
4
5
6
{
"pasteImage.defaultName": "[img]_Y-MM-DD-HH-mm-ss",
"pasteImage.path": "dir_${fileBasename}_img",
// "pasteImage.forceUnixStyleSeparator": true,
// "pasteImage.prefix": "/",
}
${fileBasename}은 paste image from local pc 확장에서 ‘확장자를 포함한 현재 파일 이름’을 나타내는 변수이다. 다시 한 번 강조하지만 이러한 변수명은 확장마다 차이가 있을 수 있으니 확장의 문서를 참조한다.
settings.json 저장 후 vscode를 리로드하고 ctrl+alt+v 키를 누르면 설정된 경로에 이미지가 저장된다.
MAC 주의사항
paste image from local pc 확장을 이용하려면 pngpaste 라는 툴이 필요하다.
1
brew install pngpaste
또한 $HOME/.vscode/extensions/sakamoto66.vscode-paste-image-1.1.9/res/mac.sh 스크립트에 오류가 있어 수정이 필요하다.
sakamoto66.vscode-paste-image-1.1.9 - 확장의 버전은 사용하는 버전에 맞게 수정한다.
1
2
# ^M 문자는 (ctrl + v 누른 상태에서 을 입력하면 됩니다.)
sed -i '' 's/^M//g' $HOME/.vscode/extensions/sakamoto66.vscode-paste-image-1.1.9/res/mac.sh