VS Code에서 Markdown을 프리뷰하며 편집할 수 있는 확장 기능 Richdown을 만들었습니다

시작하며

VS Code에서 Markdown을 작성할 때의 번거로움을 해소하고 싶어서 확장 기능을 만들어 보았습니다.

AI를 이용한 개발이 주류가 되면서 사양서나 설계서, 대부분의 문서가 Markdown이 되어가고 있습니다.

Markdown을 확인하는 기회가 늘어난 만큼, Markdown Life를 충실하게 만들고 싶다! 라는 생각으로 Obsidian의 라이브 프리뷰(Live Preview)와 같이 Markdown 소스를 유지하면서도, 가능한 한 읽기 쉬운 모습으로 그대로 편집할 수 있는 VS Code 확장 기능인 Richdown을 만들었습니다.

표준이나 인기 있는 Markdown Preview는 "왼쪽에서 편집, 오른쪽에서 확인"하는 분할 프리뷰 방식이라 "조금 그런데..."라고 느끼거나, Obsidian 같은 별도의 앱으로 이동하는 것도 번거롭다고 생각하시는 분들은 꼭 사용해 보세요.

만든 것

Richdown은 VS Code 상에서 Markdown 파일을 리치(Rich)하게 편집하기 위한 확장 기능입니다.

Markdown 파일을 열면 일반적인 텍스트 에디터가 아니라, CodeMirror 기반의 커스텀 에디터(Custom Editor)로 열립니다. Markdown 표기법을 완전히 숨기는 것이 아니라, 필요할 때는 편집할 수 있는 상태를 유지하면서 평소에는 가능한 한 프리뷰에 가까운 표시로 작성할 수 있도록 했습니다.

주요 특징은...

• Markdown을 하나의 뷰(View)에서 편집 및 프리뷰할 수 있음
• 제목, 인용, 체크박스, 링크, 이미지를 보기 쉽게 표시
• Markdown 테이블을 표로 표시하고, 그대로 셀 편집 가능
• Mermaid를 도표로 그려낼 수 있음
• 코드 블록에 구문 강조(Syntax Highlight)와 복사 버튼을 표시
• 테마나 표시 너비를 에디터 오른쪽 하단의 설정 버튼에서 전환 가능

기능 소개

1. 하나의 뷰에서 편집과 프리뷰

Richdown은 좌우 분할 프리뷰가 아니라, Markdown 파일 자체를 리치한 에디터로 엽니다.

제목이나 인용, 수평선 등은 프리뷰에 가까운 표시가 됩니다. 행에 포커스(Focus)하면 Markdown 표기법을 편집할 수 있게 하고, 포커스가 벗어나면 읽기 쉬운 표시로 돌아가는 동작을 목표로 하고 있습니다.

2. 체크박스

태스크 리스트는 체크박스로 표시합니다.

체크박스를 클릭하면 Markdown의 - [ ] / - [x] 도 업데이트됩니다. 겉모습은 UI로 다루면서 파일은 일반적인 Markdown 상태를 유지합니다.

3. Rich Table

Rich Table은 Markdown에서 번거로운 테이블 작성을 해결합니다.

Rich Table 상태 그대로 내용 업데이트나 행·열의 추가 및 삭제도 가능하게 했습니다. 일반적인 Markdown과 마찬가지로 링크나 이미지 첨부도 가능합니다.

컨텍스트 메뉴(Context Menu) 표시 방식은 우클릭입니다.

4. 코드 블록

코드 블록은 모서리가 둥근 블록으로 표시하며, 오른쪽 상단에 복사 버튼을 겹쳐 두었습니다.

json이나 ts 등 언어 지정이 있는 경우에는 구문 강조(Syntax Highlight)도 적용합니다.

아직 일부 언어에는 대응하지 못하고 있지만, 추후 대응해 나갈 예정입니다.

5. Mermaid

Mermaid는 지연 로딩(Lazy Load) 방식을 사용합니다.

Markdown 파일에 Mermaid 블록이 있는 경우에만 렌더러(Renderer)를 읽어오도록 하여, 일반적인 Markdown 편집이 무거워지지 않도록 했습니다.

표시 크기는 설정에서 전환할 수 있습니다.

• Source: 소스 행수에 맞춤
• Readable: 읽기 쉬운 최소 높이를 확보
• Large: 도표의 복잡도에 따라 조금 크게 표시

또한, 프리뷰 상의 버튼을 통해 확대·축소·맞춤(Fit)·모달(Modal) 표시를 할 수 있습니다.

6. 테마와 표시 너비

에디터 오른쪽 하단의 설정 버튼을 통해 Richdown 내의 테마와 표시 너비를 변경할 수 있습니다.

테마는 VS Code의 테마에 맞추는 default 외에도 몇 가지 다크 테마와 라이트 테마를 준비해 두었습니다. 표시 너비도 일반 너비와 와이드 표시를 전환할 수 있습니다.

7. 기타

인용이나 글머리 기호 등 일반적인 Markdown 표기법은 물론, <details> 블록의 접기 기능도 대응하고 있습니다.

구현 방향성

Richdown은 VS Code의 Custom Editor와 Webview를 사용하고 있습니다.

일반적인 VS Code 에디터의 장식(Decoration)만으로도 Markdown 표기법을 연하게 하거나, 제목(Heading)의 외관을 조금 바꾸는 등의 작업은 가능합니다. 하지만 표(Table)를 정말 표로서 편집하거나, Mermaid를 동일한 뷰 내에서 조작하기에는 한계가 있습니다.

그래서 Markdown 파일을 Custom Editor로 열고, webview 측에 CodeMirror를 탑재하는 구성으로 만들었습니다.

대략 다음과 같은 구성입니다.

• VS Code extension 측에서 Markdown 파일을 Custom Text Editor로 열기
• webview 내에서 CodeMirror를 사용하여 편집 UI 구축하기
• 편집 내용은 VS Code의 WorkspaceEdit를 경유하여 원본 파일에 반영하기
• 이미지나 링크를 여는 처리는 extension 측에 메시지를 보내 실행하기
• Mermaid는 필요할 때만 webview에 로드하기

아직 개선하고 싶은 점

아직 더 다듬고 싶은 부분들이 있습니다.

• 긴 문서에서의 퍼포먼스(Performance) 개선
• 테이블 편집의 조작성 추가 향상
• 코드 블록(Code Block)의 대응 언어 추가
• Mermaid의 표시 조정
• Marketplace용 스크린샷 및 문서 정비

요약

Richdown은 VS Code에서 Markdown을 더욱 기분 좋게 작성하기 위해 만든 확장 기능입니다.

분할 프리뷰(Split Preview) 방식이 아니라, 하나의 뷰 안에서 Markdown을 읽기 쉽게 표시하고 그대로 편집할 수 있는 경험을 목표로 하고 있습니다.

아직 초기 버전이지만 표 편집, Mermaid, 코드 블록, 이미지, 링크 등 기술 기사나 문서를 작성할 때 자주 사용하는 요소들은 꽤 다룰 수 있게 되었습니다.

앞으로도 제가 일상적으로 Markdown을 작성하면서 불편했던 점들을 고쳐나가며 키워나갈 예정이니, 괜찮으시다면 이용해 주세요.

마지막으로

제가 제작하고 있는 앱들을 소개합니다. 관심이 있으시다면 이쪽도 꼭 이용해 보세요. (현재 모두 광고는 없습니다)

piinxi

알림으로 커뮤니케이션을 하는 서비스입니다. 가족이나 친구, 취미 커뮤니티를 생성하여 서로 알림을 보내고 리액션을 하는, 그런 조용한 서비스입니다. 알림에는 온도감 설정도 가능합니다.

FavBox

자신의 즐겨찾기를 오로지 모으고 관리하는 서비스입니다. 웹 페이지뿐만 아니라 SNS 게시물이나 Youtube까지 관리할 수 있습니다.

앞으로는 이미지나 동영상, 위치 정보 등 다양한 것들의 즐겨찾기를 관리할 수 있도록 만들 예정입니다.

Mivela

시크릿 폴더입니다. 외부 접속 없음. 단말기 내에서 완결됩니다.

구독형(Subscription) 방식이 아닌 일회성 구매 방식입니다.