MarkNode의 마크다운 미리보기 창은 다양한 테마로 스타일을 지정할 수 있습니다. 기본 제공되는 모양을 선택하거나, 미리보기가 애플리케이션 테마를 자동으로 따르도록 하거나, 문서가 게시될 환경에 맞춰 직접 CSS를 작성할 수 있습니다.
애플리케이션 테마 따르기
기본적으로 미리보기는 앱 테마에 맞춤으로 설정되어 있습니다. 현재 애플리케이션 테마와 어울리는 기본 제공 스타일을 사용하므로, Paper에서 Midnight(또는 다른 테마)으로 전환하면 한 번의 동작으로 미리보기 색상도 함께 변경됩니다. 앱의 나머지 부분과 다른 모양을 원하는 경우가 아니라면 미리보기 테마를 따로 선택할 필요가 없습니다.
기본 제공 테마
MarkNode에는 모든 사용자가 사용할 수 있는 기본 제공 미리보기 테마 세트가 포함되어 있습니다. 이 테마들은 읽기 전용이라 수정할 수 없지만, 언제든지 복사하여 사용자 지정 테마의 출발점으로 삼을 수 있습니다. 각 애플리케이션 테마(Paper, Midnight, Sepia, Nord, Solarized Dark, High Contrast)와 짝을 이루는 스타일 외에도, 다음과 같이 용도와 분위기에 특화된 모양이 있습니다.
- GitHub Light 및 GitHub Dark — 문서 작성에 적합한 GitHub 스타일 렌더링
- Solarized Light 및 Solarized Dark — Solarized 팔레트
- Serif — 긴 글에 적합한 가운데 정렬 세리프 단
- Compact — 밀도 높은 참고 자료에 적합한 조밀한 레이아웃
- Academic, Newsprint, Dracula 등
기본 제공 테마는 기본 배경, 텍스트, 링크, 테두리 색상을 활성 애플리케이션 테마에서 가져오므로, 다시 선택하지 않아도 밝은 모드와 어두운 모드 모두에서 알맞게 보입니다. (앱 테마에 맞춤을 뒷받침하는 내부 Default 스타일도 있지만, 메뉴에서는 Default를 직접 고르는 대신 앱 테마에 맞춤을 선택합니다.)
테마를 전환하려면 미리보기 창 헤더의 미리보기 스타일 버튼을 클릭하거나, 미리보기의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하여 스타일 목록을 사용하세요. 애플리케이션 테마를 다시 따르게 하려면 앱 테마에 맞춤을 선택하고, 특정 스타일로 고정하려면 원하는 스타일을 선택하세요. 변경 사항은 편집기 옆에 도킹된 미리보기와 도킹을 해제한 미리보기 창 등 모든 미리보기 화면에 즉시 적용되며, 세션이 바뀌어도 유지됩니다.
사용자 지정 테마 만들기
미리보기 스타일 메뉴에서 **이 스타일로 새 스타일 만들기…**를 선택하면 현재 활성화된 테마를 기반으로 사용자 지정 테마를 만들 수 있습니다.
- 새 테마의 이름을 입력합니다. 기본 제공 테마와 같은 이름은 사용할 수 없습니다.
- 원본 CSS가 미리 채워진 상태로 CSS 편집기가 열립니다. 원하는 대로 편집하세요.
입력하는 동안 미리보기가 실시간으로 다시 렌더링됩니다. CSS는 저장하기 전까지 메모리에만 보관되므로 자유롭게 실험할 수 있으며, 마음이 바뀌면 편집기를 닫아 편집 내용을 취소할 수 있습니다.
이미 만든 사용자 지정 테마를 편집하려면 해당 테마를 선택한 뒤 같은 메뉴에서 **현재 스타일 편집…**을 선택하세요.
저장 및 공유
사용자 지정 테마를 저장하면 전역 테마 라이브러리에 보관되므로 이 컴퓨터의 모든 프로젝트에서 사용할 수 있습니다. 현재 프로젝트에 사본 저장을 선택하면 프로젝트 안에도 기록되어 테마가 프로젝트와 함께 이동합니다. 프로젝트를 Git에 체크인하면 저장소를 복제하는 모든 협업자가 동일한 미리보기를 보게 됩니다.
아직 가지고 있지 않은 사용자 지정 미리보기 테마가 포함된 프로젝트를 열면, 해당 프로젝트가 열려 있는 동안 그 테마가 스타일 목록에 표시됩니다.
사용자 지정 CSS로 스타일을 지정할 수 있는 요소
사용자 지정 CSS는 미리보기 컨테이너(.markdown-preview)로 범위가 제한되므로 편집기, 사이드바 등 MarkNode의 다른 부분에는 영향을 주지 않습니다. 다음 항목의 스타일을 지정할 수 있습니다.
- 본문 글꼴과 크기
- 제목, 목록, 인용문, 표
- 코드 블록, 인라인 코드, 구문 강조 색상
- 간격, 여백, 최대 콘텐츠 너비
사용자 지정 테마가 기본 제공 테마처럼 밝은 모드와 어두운 모드에 자동으로 적응하도록 하려면, 기본 제공 테마를 복제하여 시작하세요. 복사본이 테마 인식 기반을 그대로 물려받으므로 거기서부터 조정하면 됩니다.
CSS는 시각적 표현만 조정할 뿐 기반 HTML은 변경하지 않으므로, 대대적인 DOM 구조 변경은 불가능합니다.
사용자 지정 테마 삭제
사용자 지정 테마를 선택한 뒤 스타일 메뉴의 삭제 동작을 사용하세요. 먼저 확인 창이 나타납니다. 삭제한 테마가 현재 활성화된 테마라면 MarkNode는 기본 제공 기본 테마로 돌아갑니다. 기본 제공 테마에는 삭제 동작이 없으며 제거할 수 없습니다.