MarkEdit Direct Preview

MarkEdit의 편집 ↔ 미리보기 모드를 클릭 한 번에 전환합니다. MarkEdit-preview 위에서 동작하는 얇은 헬퍼입니다.

English · Releases · MIT License

---

왜 필요한가요

MarkEdit-preview가 이미 마크다운 미리보기에 필요한 모든 것을 제공합니다. 다만 기본 UX에 두 가지 마찰이 있습니다.

• 툴바의 View Mode 항목은 클릭할 때마다 드롭다운 메뉴를 펼칩니다. Edit과 Preview를 단순히 왕복하고 싶을 때도 마찬가지입니다.
• ⇧⌘V(Change Mode)는 기본값으로 세 모드(edit → side-by-side → preview)를 순환합니다. 두 상태 토글이 아닙니다.

Direct Preview는 이 두 문제를 한 번에 정리하는 인스톨러입니다.

1. 툴바에 끌어다 놓을 수 있는 Toggle Preview 눈 아이콘 한 개.
2. ⇧⌘V를 두 상태(Edit ⇄ Preview)로 단순화.

MarkEdit-preview를 대체하지 않습니다. 실제 렌더링과 모드 전환은 여전히 MarkEdit-preview가 담당합니다.

---

요구사항

• macOS + MarkEdit 1.24.0 이상
• MarkEdit-preview 사전 설치

---

설치

1. 스크립트 배치

최신 릴리스에서 markedit-direct-preview.js를 받아 다음 경로에 복사합니다.

~/Library/Containers/app.cyan.markedit/Data/Documents/scripts/

소스에서 직접 빌드하려면 아래 개발 섹션을 참고하세요.

2. 원클릭 토글 설정 적용

1. MarkEdit 재시작 (⌘Q → 다시 실행)
2. 메뉴바에서 Extensions → Direct Preview → Apply One-Click Toggle Setup…
3. MarkEdit 한 번 더 재시작
4. 툴바 우클릭 → Customize Toolbar... → Toggle Preview 눈 아이콘을 툴바로 드래그 → Done

끝입니다. 이제 눈 아이콘을 한 번 클릭하면 메뉴 없이 Edit ⇄ Preview가 즉시 전환됩니다.

---

"Apply Setup"이 실제로 하는 일

투명성을 위해, 이 동작은 MarkEdit settings.json에 다음 키를 머지합니다.

{
  "editor.customToolbarItems": [
    {
      "title": "Toggle Preview",
      "icon": "eye",
      "actionName": "Change Mode"
    }
  ],
  "extension.markeditPreview": {
    "changeMode": {
      "modes": ["edit", "preview"]
    }
  }
}

기존 키와 머지됩니다. 손으로 직접 추가해도 결과는 동일하므로 그 경우 확장 없이도 같은 효과를 볼 수 있습니다.

되돌리려면 Extensions → Direct Preview → Revert One-Click Toggle Setup….

---

알려진 한계

다음은 MarkEdit 본가와 markedit-api의 상위 제약이며 이 확장의 버그가 아닙니다.

• 툴바 아이콘은 모드에 따라 동적으로 바뀌지 않습니다. customToolbarItems[*].icon은 정적입니다. 눈 아이콘은 항상 eye로 고정되며 eye.slash로 토글되지 않습니다.
• 분할 버튼(아이콘=액션, ⌄=메뉴) 미지원. 툴바 아이템은 메뉴 또는 액션 중 하나입니다.
• 외부 확장이 모드 전환을 호출할 공개 API가 없습니다. 이 확장은 모드를 직접 전환하지 않으며, MarkEdit이 기존 Change Mode 액션을 원클릭 툴바 아이템에 바인딩하도록 설정만 표준화합니다.

이 한계를 풀고 싶다면 MarkEdit 또는 MarkEdit-preview에 기능 요청을 올리는 것이 적절합니다.

---

개발

git clone https://github.com/Squarelight-ai/markedit-direct-preview.git
cd markedit-direct-preview
npm install
npm run build
npm run install:script   # dist/를 MarkEdit scripts 폴더로 복사
npm run reload           # MarkEdit 재시작

빌드 산출물은 dist/markedit-direct-preview.js 단일 CJS 파일이며 약 5 KB입니다.

---

크레딧

이 프로젝트는 MarkEdit.app의 상위 작업 없이는 존재할 수 없습니다.

• MarkEdit — 에디터 본체
• MarkEdit-preview — 미리보기 엔진 및 Change Mode 명령
• MarkEdit-api — 확장 API

제3자 상표는 각 권리자에게 귀속됩니다.

---

라이선스

MIT © 2026 Squarelight Inc.