마크다운 에디터

사용법

왼쪽에 마크다운을 입력하면 오른쪽에 렌더링된 HTML이 표시됩니다. 두 패널이 연동되어 스크롤되므로 긴 문서도 위치가 어긋나지 않습니다. 뷰 토글로 "분할", "미리보기 전용"(완성된 모습을 검토할 때), "소스 전용"(집중해서 글을 쓸 때)을 전환할 수 있습니다. **문법 참고** 버튼을 누르면 자주 쓰는 14가지 GFM 문법(제목·강조·목록·체크리스트·링크·이미지·코드·인용·구분선·표) 과 작성법을 한눈에 보여주는 접이식 패널이 열립니다. 체크박스나 펜스 코드 블록 표기를 까먹었을 때 유용합니다. 초안은 키 입력 후 300ms 뒤에 localStorage에 자동 저장되므로 탭을 닫았다가 이 페이지를 다시 열면 작업을 이어 갈 수 있습니다.

작성한 내용은 리포지토리에 커밋용이라면 마크다운(.md)으로, 메일로 가볍게 공유할 거라면 기본 스타일이 포함된 단일 HTML파일(.html)로 내려받을 수 있습니다. "HTML 복사" 버튼은 본문 마크업만 복사하므로 다른 CMS나 블로그 에디터에 붙여 넣기 좋습니다. 파싱에는 GFM이 활성화된 marked를 사용하고, 결과 HTML은 표시 전에 DOMPurify로 새니타이즈되므로 신뢰할 수 없는 원본을 붙여 넣어도 스크립트가 실행되지 않습니다.

예제

| Feature | Status |
| --- | --- |
| Tables | done |
| Task lists | done |

┌──────────┬────────┐
│ Feature  │ Status │
├──────────┼────────┤
│ Tables   │ done   │
│ Task lists│ done   │
└──────────┴────────┘

- [x] Write the draft
- [ ] Review with the team
- [ ] Publish

☑ Write the draft
☐ Review with the team
☐ Publish

```ts
function greet(name: string): string {
  return `Hello, ${name}!`;
}
```

Renders as a monospace block with the language label preserved.

See [the spec](https://example.com/spec "Latest revision") for details.

See the spec for details.  (hover shows "Latest revision")

자주 묻는 질문

관련 개념

마크다운은 2004년에 구조화된 문서를 평문으로도 읽기 좋게 작성하는 수단으로 등장했습니다. 기계 가독성을 강조한 HTML의 의도적인 반전입니다. John Gruber의 첫 구현은 그때그때 판단으로 유연하게 해석하는 방식이었고, 결과적으로 유연성은 높지만 모호함이 남는 사양이 되었습니다. 2014년 시작된 CommonMark가 경계 사례(*foo _bar* baz_는 정확히 어떻게 해석할까?)를 형식화했고, 현재 대부분의 현대 파서는 이를 기반 문법으로 사용합니다.

CommonMark 위에는 맥락별 기능을 더한 "플레이버"가 있습니다. GitHub Flavored Markdown(GFM)은 표·작업 목록·취소선·자동 링크·언어 식별자가 붙은 fenced code block을 추가하며, 이 에디터가 구현한 방언이기도 합니다. React 프로젝트에서 인기 있는 MDX는 JSX 컴포넌트를 문서에 직접 임베드할 수 있게 해 줍니다. Pandoc 마크다운은 각주·인용·학술 작성용 기능을 다수 추가합니다. 모두 평문으로 읽히는 핵심을 공유하고, 미리보기에 무엇이 나타나는지가 달라집니다. 플랫폼 간 이식성이 중요하다면 CommonMark에 머무르고, 플레이버 고유 기능은 대상이 지원할 때만 쓰는 것이 안전합니다.