[vscode] .md 파일 깃허브 테마로 사용하기

vscode 상에서 미리 보여주는 마크다운 파일은 github와 다른 테마를 사용하기 때문에 개발 환경에서 작성한 문서 내용이 깃허브와 다를 수 있다. 특히 mermaid.js 의 그래프 표현 등은 vscode에서 기본적으로 지원하지 않는다. 여태까지는 로컬에서 문서를 작성한 후 push해서 예상대로 잘 나왔는지 봤는데, 이게 너무 귀찮다는 생각이 들어서 혹시 md 파일도 깃허브 테마로 볼 수 있는 방법이 없을까 찾아봤고, 실제로 있었다.

• Markdown Preview Github Styling - Visual Studio Marketplace
• Markdown Preview Mermaid Support - Visual Studio Marketplace

위는 md 파일에 대해 기본적인 깃허브 스타일을 주는 확장이고, 아래는 마크다운에서 marmaid.js를 지원하는 확장이다. 기본 확장에 없는 일부 기능들은 Markdown Preview ~ 이름의 다른 모듈로 지원하고 있는 모양이다.

표현된 mermaid 그래프

이전에는 mermaid 그래프가 단순 텍스트로 나타났는데, 이제는 그래프 형태로 표현된다. 이제  mermaid 플레이그라운드에 입력해서 비교할 필요가 없어서 정말 좋다. 그래프 이외에도 코드 강조 부분 (`` ``) 도 깃허브스럽게 표현되서 만족스럽다. 진작에 검색해볼껄 싶다...