Styled Markdown
VS Code에서 Markdown을 작성하면서 서식이 적용된 결과, 다이어그램, Marp 슬라이드와 PDF 출력 결과를 한 화면에서 확인하는 확장입니다.
한눈에 보기
- 원문 편집기와 실시간 미리보기를 같은 Custom Editor 안에서 사용
- Mermaid, PlantUML, Graphviz 다이어그램을 SVG로 렌더링
- 문서 폴더·워크스페이스 안의 상대 경로 이미지를 미리보기에 렌더링
- Markdown 미리보기와 PDF 출력용 A4 미리보기를 전환
- Marp 슬라이드 미리보기 및 슬라이드 PDF 내보내기
- Markdown·PDF·에디터·다이어그램·Marp 스타일을 GUI로 관리
- VS Code의 일반 저장 동작과 연결되어
Ctrl/Cmd+S로 문서 저장
빠른 시작
- Explorer에서 Markdown 파일을 엽니다.
- 편집기 탭을 우클릭한 뒤 **Reopen Editor With...**를 선택합니다.
- Styled Markdown Editor를 선택합니다.
왼쪽에서 Markdown 원문을 작성하면 오른쪽 미리보기가 갱신됩니다. 변경 내용은 VS Code 문서의 dirty 상태로 표시되며, File > Save 또는 Ctrl/Cmd+S로 저장합니다. 리본의 Refresh는 현재 내용을 즉시 다시 렌더링합니다.
미리보기와 PDF
상단 리본에서 편집기와 미리보기를 각각 켜거나 끌 수 있습니다. 둘 중 하나는 항상 표시됩니다.
- Markdown / Marp: 일반 문서와 슬라이드 문서 미리보기를 전환합니다.
- Markdown / PDF: Markdown 모드에서 화면용 스타일과 A4 PDF 출력용 스타일을 전환합니다.
- Zoom: 우측 미리보기만 50%~200%로 확대·축소합니다. PDF 모드는 페이지 크기를 유지한 채 화면 배율만 바꿉니다.
- Previous / Next: PDF 모드에서는 페이지를, Marp 모드에서는 슬라이드를 이동합니다.
- PDF: 현재 문서와 선택한 PDF 스타일을 사용해 PDF를 내보냅니다.
PDF 미리보기와 내보내기는 같은 용지·여백·스타일 기준을 사용합니다. 기본 출력은 A4 세로, 16mm 여백입니다. Chrome 또는 Chromium 자동 탐색에 실패한 경우 styledMarkdown.pdf.chromePath에 실행 파일의 절대 경로를 설정하세요.
다이어그램
코드 펜스에 언어를 지정하면 문서와 PDF 미리보기에 다이어그램을 렌더링합니다.
```mermaid
flowchart LR
Draft --> Preview --> Export
```
```plantuml
@startuml
actor Author
Author -> Editor: Write Markdown
@enduml
```
```graphviz
digraph Document {
Draft -> Preview -> Export
}
```
모든 다이어그램은 로컬에서 처리하며 문서 내용을 원격 렌더링 서버로 전송하지 않습니다. 다이어그램 유형별 색상과 배경은 Style Manager에서 독립적으로 설정할 수 있습니다.
로컬 이미지
Markdown 표준 이미지 문법을 사용하면 문서 위치를 기준으로 이미지를 렌더링합니다.
보안을 위해 문서 폴더 또는 현재 워크스페이스 안에 있는 로컬 파일만 Webview에서 불러옵니다. 로컬 이미지는 이미지 자체만 표시하며 별도 링크를 만들지 않습니다. 원격 URL은 이미지를 내려받거나 표시하지 않고, 대체 텍스트와 외부 링크로 표기합니다. 링크를 누르면 현재 미리보기를 벗어나 운영체제 기본 브라우저에서 열립니다. 워크스페이스 밖의 절대 경로는 렌더링하지 않습니다.
Style Manager
리본의 Style에서 Style Manager를 엽니다. CSS 원문 편집 대신 스타일 종류에 맞춘 입력 폼으로 색상, 글꼴 크기, 여백과 서식을 관리합니다.
| 스타일 유형 |
적용 위치 |
| PDF preview style |
PDF 미리보기와 PDF 내보내기 |
| Markdown preview style |
일반 Markdown 미리보기 |
| Markdown editor style |
원문 편집기의 Markdown 마커 |
| Mermaid / PlantUML / Graphviz diagram style |
해당 다이어그램 렌더링 |
| Marp preview style |
Marp 슬라이드 미리보기 |
Markdown 미리보기에는 Default Markdown black theme와 Default Markdown white theme가 포함되며, 검정 테마가 기본값입니다. 기본 스타일은 삭제할 수 없고 언제든 초기값으로 되돌릴 수 있습니다. 사용자가 만든 스타일은 목록에서 선택·수정·삭제할 수 있으며, Open style folder로 로컬 저장 폴더를 열 수 있습니다.
Marp 슬라이드
문서에 Marp front matter와 --- 슬라이드 구분을 사용한 뒤 Marp를 선택하세요. 슬라이드는 페이지 단위로 표시되며 Mermaid·PlantUML·Graphviz 다이어그램도 슬라이드 안에서 렌더링됩니다. PDF 내보내기는 일반 A4 문서 설정 대신 Marp 슬라이드 크기와 구성을 유지합니다.
설정
| 설정 |
설명 |
styledMarkdown.preview.zoom |
미리보기 확대 비율 |
styledMarkdown.preview.styleId |
PDF 미리보기·내보내기 스타일 |
styledMarkdown.preview.markdownStyleId |
Markdown 미리보기 스타일 |
styledMarkdown.editor.styleId |
원문 편집기 마커 스타일 |
styledMarkdown.pdf.chromePath |
PDF 생성에 사용할 Chrome/Chromium 경로 |
개인정보와 로컬 저장소
스타일 라이브러리와 Marp 테마는 VS Code의 확장 전용 전역 저장소에 보관됩니다. 문서 원문은 사용자가 저장하기 전까지 자동으로 파일에 기록되지 않습니다. PlantUML·Graphviz·Mermaid 다이어그램은 로컬 환경에서 처리합니다.
문제 해결
- PDF가 생성되지 않으면 Chrome 또는 Chromium 설치 상태를 확인하고
styledMarkdown.pdf.chromePath를 설정하세요.
- Markdown 파일을 일반 편집기로 열었다면 **Reopen Editor With...**에서 Styled Markdown Editor를 다시 선택하세요.
- 다이어그램이 보이지 않으면 코드 펜스 언어가
mermaid, plantuml, graphviz인지 확인한 뒤 Refresh를 누르세요.
개발과 패키징
개발 환경에서는 VS Code의 Run and Debug에서 Run Styled Markdown Extension을 선택하고 F5로 Extension Development Host를 실행합니다.
테스트는 npm test, 실제 Extension Development Host E2E는 npm run test:extension:e2e로 실행합니다. 배포용 VSIX는 다음 명령으로 만듭니다.
npm run package
생성 파일은 styled-markdown-editor-<version>.vsix입니다.
변경 이력은 CHANGELOG.md에서 확인할 수 있습니다.
