VSCode Mark Down에 Image 간편하게 넣기

Nextra Blog를 시작하다🛫

저는 Blog를 시작할 때 다음과 같은 고민을 했습니다.

1. Markdown 문법을 잘 지원할 것
2. 미약한 HTML 지식이나마 써서 다양한 Layout을 짤 수 있을 것
3. VIM 단축키를 사용해서 작성할 수 있는 블로그일 것
4. 문서를 편안하게 보기위한 TOC 기능이 Responsive하게 잘 지원될 것 고려했지만 어차피 폰으로 안봄
5. 내가 주저리 주저리 하고 싶은 얘기들을 써놓아도 죄책감이 들지 않을 것

이었습니다.

그리하여 MK Docs, Docusaurus를 거쳐 Nextra Blog를 시작하게 되었습니다.
HTML, CSS를 잠깐 공부하긴 했지만 잘 모르는 저로써는 Docusaurus를 커스터마이즈해서 쓰기에 조금 어려움이 느껴졌고 의미없는 인터넷 탐색을 하다가 우연히 Nextra로 게재 된 블로그를 봤는데 기본적으로 디자인이 깔끔해보여서 또 한 번 블로그 이전을 하게 되었습니다.

필자 블로그 - Link

Nextra의 폴더 구성 방식과 몇몇 기능을 익히는데는 앞서서 사용하고 있던 블로그가 있었기 때문에 어려움은 없었습니다.

이미지 삽입의 불편함🙅

VSCode를 사용해서 블로그를 작성하면서 가장 불편하게 느껴졌던 부분은 이미지 삽입이었습니다.
Velog, Tistory 등을 작성 중인 포스팅에 이미지를 넣으면 자동으로 이미지가 등록이 되었는데, Nextra의 이미지는 수동으로 public/img 폴더를 만들어서 넣어줘야 했고 그 마저도 포스팅이 많아지면 포스팅 별로 폴더까지 구분하면 점점 폴더를 찾아서 등록해야 하는 번거로움에 최근엔

'이미지 서버를 따로 만들까? 나중에 이전하기도 좋잖아'
'커뮤니티랑 동떨어지는 것 같고 접근성도 어렵고 sse도 지원이 잘 안되는데 온라인 Blog로 옮길까?'

등의 고민을 했습니다.

그런 고민을 하던 중 어떤 키워드로 유입된건지 정확히 기억은 안나지만
대충 nextra image paste이런 키워드로 찾은 extension이 있어서 이를 소개할까 합니다.

Paste Image Extension➕

cmd + shift + x를 누르고 검색창에 paste image를 검색하면

이런 extension이 나옵니다.

해당 extension을 다운 받고 cmd + shift + p -> open user settings를 검색해서 setting.json창을 열어서

맨 아래쪽에

위와 같이 설정을 저장해주면 됩니다.
👇 코드를 복사하세요.

  "pasteImage.basePath": "${projectRoot}/public",
  "pasteImage.path": "${projectRoot}/public/paste-image/${currentFileNameWithoutExt}",
  "pasteImage.insertPattern": "<img src=\"${imageFilePath}\" width=\"75%\" />",
  "pasteImage.prefix": "/",

설정 옵션과 공식사이트🧭

공식 설정 방법은 여기서 확인할 수 있습니다.

각 옵션은 다음과 같습니다.

• pasteImage.basePath : 이미지 url의 기본 경로 입니다.
• pasteImage.path : 실제 이미지가 저장되는 주소 입니다.
• pasteImage.insertPattern : 이미지를 붙여넣기 할 때 입력되는 글자의 패턴 입니다.
• pasteImage.prefix : 위 패턴 앞에 적히는 글자 입니다.

사용법👏

이미지를 복사해서 cmd + option + v를 작성 중인 파일에 붙여주면 위의 설정대로면 public/paste-image/작성중인 파일명/날짜의 형태로 저장이 됩니다.