Easy is Perfect

Visual Studio Code 에서 Markdown 이미지 손쉽게 삽입하기(feat. Jekyll/React)

  • melonicedlatte
  • Apr 09, 2022


1. 문제점

Markdown 에서 이미지를 삽입하는 것은 상당히 귀찮은 일입니다. 기존까지 저는 블로그를 하면서도 그냥 아무 생각 없이 이미지를 파일화하여 폴더에 넣고, 직접 마크다운에 필요한 이미지 경로를 아래와 같은 형태로 삽입했었습니다.

![](/assets/images/2022/2022-04-09-02-31-59.png)

이렇게 되면 하나하나 해야되는게 너무 귀찮아서, 포스팅을 좀 덜하게 되는 경향이 있던 것 같습니다. 무한 포스팅을 하고 싶다는 생각이 들어 Visual Studio Code 에서 사용할 수 있는 extension 을 찾아보니 상당히 좋은 프로그램이 있었습니다.

2. 해결 방법

image

위의 프로그램을 설치합니다. 해당 확장 프로그램의 Git repository vscode-paste-image에서도 관련된 설명을 볼 수 있습니다.

image

기본적은 옵션들은 확장 설정에서 변경할 수 있습니다. 저는 해당 옵션은 변경하지 않았습니다.

image

이후 .vscode/settings.json 을 만들어서 원하는 세팅으로 변경해줍니다. 저는 위와 같이 assets/images/2022 경로에 이미지를 넣어주기 때문에 위와 같이 설정했습니다. 상세한 설정은 세부적으로 직접 시도해보면서 변경해보시면 손쉽게 확인하실 수 있습니다.

{
    "pasteImage.path": "${projectRoot}/assets/images/2022/",
    "pasteImage.basePath": "${projectRoot}/assets/images/",
    "pasteImage.forceUnixStyleSeparator": true,
    "pasteImage.prefix": "/assets/images/"
}

이와 같은 방법으로 markdown 에서 이미지 삽입을 훨씬 쉽게 할 수 있게 되어 매우 편리해졌습니다. 클립보드에 있는 이미지를 한 번에 넣을 수 있다는게 너무 좋네요.

이미지 삽입 단축키는 아래와 같습니다. 잘 활용해보세요!

  • Windows : Ctrl+Alt+V
  • Mac : Cmd+Alt+V



Search