DevToolPal
한국어

Markdown 미리보기

Markdown을 작성하면서 GitHub Flavored Markdown으로 렌더링된 결과를 실시간으로 보고, 생성된 HTML을 복사할 수 있습니다.

로컬에서 실행, 업로드 없음

옵션

보기

Markdown

0자 · 0 B

미리보기

결과가 여기에 표시됩니다

기능 소개

Markdown 미리보기는 실시간 Markdown 에디터입니다. 왼쪽에 입력하면 오른쪽에 렌더링 결과가 바로 나타납니다. 제목, 목록, 링크, 이미지, 표, 코드 블록, 인용문을 모두 확인할 수 있습니다. README, 릴리스 노트, 블로그 글, 문서를 커밋하기 전에 초안을 쓰거나, 까다로운 표나 중첩 목록이 어떻게 보일지 점검할 때 유용합니다.

보기를 HTML로 바꾸면 생성된 마크업을 볼 수 있고, 이를 복사하거나 기본 스타일이 적용된 완전한 HTML 페이지로 다운로드할 수 있습니다.

사용 방법

  1. 입력란에 Markdown을 입력하거나 붙여 넣고, .md 파일을 끌어다 놓거나 예시를 클릭합니다.
  2. 입력하는 동안 미리보기가 갱신됩니다. 미리보기 위의 줄에는 단어, 제목, 링크 개수가 표시됩니다.
  3. 렌더링된 페이지를 보려면 미리보기를, 마크업을 보려면 HTML을 선택합니다.
  4. HTML 복사로 결과를 CMS나 이메일에 붙여 넣거나, HTML 다운로드로 독립 실행형 파일을 받습니다.

Markdown 치트 시트

입력결과
# Title1단계 제목 (##는 2단계, ######까지)
**bold**와 _italic_굵게와 기울임
[text](https://example.com)링크
![alt](image.png)이미지
- item 또는 1. item글머리 기호 목록 또는 번호 목록
- [ ] todo작업 목록 체크박스 (GFM)
`code`인라인 코드
한 줄에 단독으로 쓴 ```js언어가 지정된 펜스 코드 블록
> quote인용 블록
---수평선

표는 파이프와 구분 행으로 만듭니다. | a | b | 다음 줄에 | --- | --- |를 씁니다. 표는 CommonMark가 아닌 GitHub Flavored Markdown 확장 문법이므로 GitHub Flavored Markdown이 켜져 있을 때만 렌더링됩니다. 끄면 파이프가 그대로 있는 일반 텍스트로 표시됩니다.

예시

## Highlights

- [x] Tables and task lists
- ~~Old API~~ removed

위 코드는 2단계 제목 아래에 체크된 작업 항목 하나와 취소선이 그어진 줄 하나로 렌더링됩니다.

자주 묻는 질문

› 어떤 Markdown 문법을 지원하나요?

CommonMark에 GitHub Flavored Markdown을 더한 문법을 지원합니다. 표, 작업 목록, 취소선, 펜스 코드 블록, 자동 링크를 쓸 수 있습니다. GFM을 끄면 엄격한 CommonMark 렌더러에서 텍스트가 어떻게 보이는지 확인할 수 있습니다.

› HTML이 포함된 Markdown을 붙여 넣어도 안전한가요?

네. Markdown은 원시 HTML을 허용하므로 미리보기는 스크립트가 실행되지 않는 샌드박스 프레임 안에 표시됩니다. 다만 복사하는 HTML은 정화(sanitize)되지 않으므로, 신뢰할 수 없는 콘텐츠를 자신의 사이트에 게시하기 전에는 직접 정리해야 합니다.

› 줄바꿈을 한 번만 하면 왜 새 줄이 시작되지 않나요?

표준 Markdown에서는 줄바꿈 하나를 공백으로 취급하고, 빈 줄이 있어야 새 문단이 시작됩니다. "줄바꿈을 <br>로 변환"을 켜면 GitHub 댓글처럼 모든 줄바꿈이 줄바꿈으로 렌더링됩니다.

› 입력한 텍스트가 저장되나요?

마지막 입력은 이 브라우저의 로컬 스토리지에 보관되어 새로고침해도 남아 있습니다. 서버로 업로드되지는 않으며, 지우기 버튼으로 삭제할 수 있습니다.