Markdown 편집기이란?
분할 패널 편집기로 즉각적인 HTML 미리보기를 제공합니다. GitHub Flavored Markdown 지원: 표, 작업 목록, 구문 강조 코드 블록. HTML로 내보내거나 렌더링된 결과를 복사할 수 있습니다.
렌더링은 GitHub 스타일의 Markdown 파서를 사용해 언어 힌트가 붙은 펜스드 코드 블록(javascript, python, css 등), 체크박스 상태가 반영되는 작업 목록, 파이프 표, 각주, 취소선을 지원합니다. 도구 모음은 커서 위치에 제목, 굵게, 기울임, 링크, 이미지, 코드, 표 문법을 삽입해 줍니다. 내보내기는 CSS가 포함된 단독 HTML 파일을 만들어 첨부하거나 업로드할 수 있게 합니다.
사용 방법
- 왼쪽 편집기 창에 마크다운 내용을 작성하거나 붙여넣으세요 — 오른쪽 미리보기가 실시간으로 업데이트됩니다.
- 도구 모음을 사용하여 빠르게 서식을 지정하세요: 굵게, 기울임꼴, 제목, 링크, 이미지, 코드 블록, 표.
- 문서를 깔끔한 HTML로 내보내거나, 렌더링된 미리보기를 복사하거나, 원시 마크다운 파일을 다운로드하세요.
사용 시기
- README나 컨트리뷰션 가이드를 작성하면서 결과물을 바로바로 확인하고 싶을 때.
- Markdown 에디터가 없는 CMS에 붙여 넣기 전에 Markdown으로 블로그 글을 먼저 작성할 때.
- 회의 노트를 정리할 때 — 섹션은 제목으로, 할 일은 작업 목록으로, 결정 사항은 표로 정리.
결과
프로젝트 README를 작성합니다 — 제목, 기능 목록, JavaScript 강조 코드 블록, 설치 표를 추가합니다. 입력하면서 미리보기로 결과를 확인하고, 최종 HTML을 내보낼 수 있습니다.
자주 묻는 질문
- 코드 블록 안에서 구문 강조가 되나요?
- 됩니다. 펜스드 코드 블록 시작 백틱 뒤에 언어 식별자(```javascript, ```python, ```bash 등)를 적으면 미리보기가 highlight.js 스타일을 적용합니다. 인식되지 않거나 비워둔 언어는 색상이 없는 고정폭 글꼴 텍스트로 표시됩니다.
- 페이지를 새로고침하면 작성한 Markdown이 보존되나요?
- 네. 입력할 때마다 기기에 자동으로 저장되며, 다음에 페이지를 열면 초안이 복원됩니다. 새로고침하거나 실수로 탭을 닫아도 그대로 남습니다. 저장된 초안을 불러오면 작은 배너로 알려 드립니다. 저장된 사본을 지우려면 초기화를 누르거나 에디터를 비우세요.
- 스크린샷을 에디터에 바로 붙여넣을 수 있나요?
- 됩니다. 이미지나 스크린샷을 붙여넣으면 base64 데이터 URL 형태로 문서에 바로 임베드되고, Markdown 이미지 문법이 커서 위치에 삽입됩니다. 다만 한 가지, 데이터 URL은 파일을 크게 만들고 대부분의 플랫폼(GitHub README 포함)에서는 표시되지 않습니다. 그래서 공유할 문서라면 이미지를 호스팅에 올리고 그 링크를 에 넣는 편이 소스를 가볍게 유지합니다.
- HTML 내보내기와 렌더링된 미리보기 복사의 차이는 무엇인가요?
- HTML 내보내기는 <html>, <head>, 임베드된 CSS, <body>에 들어간 본문을 갖춘 완전한 문서를 만들어 줍니다. 미리보기 복사는 내부 HTML 조각만 제공하므로, 본문을 자체 템플릿으로 감싸는 CMS에 붙여넣기에 적합합니다.
- 줄바꿈을 하나 넣었는데 미리보기에서 줄이 바뀌지 않는 이유는 무엇인가요?
- 표준 Markdown은 단락 안의 단일 줄바꿈을 소프트랩으로 처리합니다. 강제로 줄을 바꾸려면 줄 끝에 공백을 두 개 추가하거나 빈 줄을 하나 두어 새 단락으로 만드세요. GitHub와 대부분의 정적 사이트 생성기도 같은 방식입니다.