어제 마크다운 에디터를 뭘 써볼까 고민하다가 많은 개발자들이 Visual Code를 사용하길래, 나도 설치하게 되었다.
정말 인상 깊었던 점은, 'markdown all in one' 이라는 패키지를 추가하여 간단한 입력과 클릭으로 목차페이지를 정말 쉽게 만들 수 있었던 점이었다.ctrl+shift+P 키를 활용하여 아래 사진처럼 create를 입력하면 자동으로 코드 스니펫을 넣어준다.
아래사진에서 붉은색 테두리 부분은 확장팩이 자동으로 추가해준 마크다운 코드 결과물이다. 저걸 직접 손으로 작성하려면 정말 힘들다.
실제 웹페이지 에서 보이는 결과물은 아래와 같다.
좋은 점은 이뿐만 아니다. 지금까지 markdown 언어를 깃허브 홈페이지에서 readme.md 파일을 직접 타이핑 하며 수정을 했었고, 이때마다 결과를 확인하기 위해서 commit 버튼을 눌렀다. 그래서 3일만에 readme.md 커밋만 100개 가까이 만들어 져서 정말 불편했다. (아는게 없으면 손이 고생하고 시간만 낭비하는 전형적인 예시)
그런데 VScode 와 마크다운 확장팩 덕분에 마크다운 작성시 실시간으로 결과를 바로 확인하는 기능을 사용하고 있다. 지금 타이핑 하는 이 글도 그 기능을 적극적으로 활용하고 있다. 아래사진이 바로 우측창에서 실시간으로 결과물을 확인하고 있다.
마지막으로는 paste Image 라는 확장팩이다. 이를 이용하면, 화면캡처시에 마크다운 페이지에 바로 형식을 갖추어 글에 이미지를 등록하기 편하게 해준다. 지금 이 글에 등록된 이미지도 손쉽게 등록한 이미지 이다.
아래 코드는 직접 타이핑 한것이 아니라 이미지 캡처후 ctrl + alt + v를 눌러 자동으로 생성한 코드이다. 얼마나 편리한가
[++ 추신: 한가지 문제가 있다. 티스토리에서 마크다운으로 글을 쓸 때, 이미지가 나오지 않는다. 이미지가 내 로컬에만 저장되어 있어서 그렇다. 티스토리 서버에 이미지가 저장이 되고 난 다음 그걸 마크다운 형식으로 변환해야 이미지가 정상적으로 등록이 된다.]
이러한 기능을 몰랐을 떄는 정말 글을 쓰는게 귀찮았는데, 지금은 마크다운+VScode 덕분에 글을 쓰는게 정말 즐겁다. 배운내용을 직접 활용해보니 보람도 있다.
아직 마크다운의 문법이 익숙하지 않지만 오늘 공부를 더해서 다양하게 글을 구성하도록 노력해보겠다.