VS Code를 Markdown 편집기로 쓰기

VS Code로 마크다운 글을 5개 정도 쓰고나니, 대략적인 방법들은 거의 익힌 것 같다.

오늘은 VS Code를 마크다운 편집기로 이용하는 법이다.

확장팩 두개랑 settings.json만 살짝 만지면 끝이다.

1. 확장팩

마크다운을 쓸 때 귀찮은 두 가지를 해결해주는 팩을 설치해보자.

왼쪽의 확장으로 들어가서 markdown을 검색해준다.

그리고 그림에서 보이는 팩을 설치해준다.

일단 마크다운 관련 기능들은 올인원 하나면 끝이다.

볼드체, 테이블, 리스트 등 간편한 기능들을 많이 제공한다.

이미지 업로더는 그림 넣는걸 편하게 해준다.

원래라면 이미지 다운 ➡️ 폴더로 이동 ➡️ 이미지링크삽입 의 번거로운 과정을 거쳐야 한다.

이 확장팩이면 이미지복사 ➡️ cmd+v 하나면 폴더내로 이미지가 들어가고 글에도 삽입이 된다.

2. 이용해보기

마크다운을 켰을 때 오른쪽 위를 보면 탭이 하나 더 있다.

이걸 누르면 오른쪽에서 미리보기 창이 켜진다.

글을 작성하면 바로바로 형식을 미리 볼 수 있다.

단축키도 한번 써보자.

만약 중간에 글자를 강조하고 싶다면, 해당 부분을 드래그 하고 cmd + b를 누르면 된다.

이미지 업로더가 대박 유용하다.

만약 마크다운에 넣고싶은 그림이 있다면 복사한다.

파일 자체를 복사해도 되고, 온라인에서 클립보드에 넣은 것도 가능하다.

그리고 마크다운에서 붙여넣기를 하면 아래와 글 내에 삽입되고 폴더에도 그림이 저장된다.

3. .mdx로 글을 작성 중이라면...

나는 현재 마크다운 글을 .mdx 확장자로 쓰고 있다.

이때는 .vscode 에서 settings.json을 조금만 손보면 된다.

{
  "files.associations": {
    "*.html": "html",
    "ostream": "cpp",
    "stdio.h": "c",
    "*.css": "tailwindcss",
    "*.mdx": "markdown", // 이게 핵심!
  },
  "editor.quickSuggestions": {
    "strings": "on"
  }
}

이렇게 하면 .mdx 파일도 마크다운처럼 확장팩을 이용 가능하다.

4. 글을 마치며

처음에는 마크다운으로 글을 쓰는 것에 대한 거부감이 강했다.

무조건 블로그는 웹에디터를 써야 한다고 생각했는데, 쓰는게 적응되다 보니 오히려 웹편집기보다 더 편하다.

많은 사진을 올려도 업로드를 기다릴 필요가 없다.

사진 편집도 자유롭게 할 수 있다.

어쨌든...

그렇게 생각하고 싶다.