로그인

마크다운 미리보기

렌더링된 HTML로 마크다운 미리보기

마크다운
미리보기

Hello, Markdown

A quick bold word and some italics.

  • Bullet one
  • Bullet two
    • Nested
  • Bullet three
const greeting = 'hello world';
console.log(greeting);

Block quotes work too.

Col A Col B
1 2
3 4

Link

어떤 종류의 마크다운이 지원되나요?

미리보기는 GitHub 스타일 마크다운(GFM)을 위해 구성된 `marked` 파서를 사용합니다: `|` 구분 기호가 있는 테이블, ``` 마커와 언어 힌트가 있는 코드 블록, URL에 대한 자동 링크, 작업 목록 체크박스(`- [ ]`), 그리고 `~~text~~`로 표시된 취소선.

출력 HTML은 렌더링 전에 정화되므로, 신뢰할 수 없는 마크다운을 붙여넣어도 스크립트 태그나 스타일시트를 브라우저에 주입할 수 없습니다. 원시 정화되지 않은 HTML 출력을 원하시면 로컬에서 전용 파서를 사용하세요.

사용 사례

  • 커밋하기 전에 README 미리보기 — GitHub가 제목, 코드 블록 및 목록을 어떻게 렌더링할지 확인하세요.
  • 문서 초안 작성 — API 문서를 마크다운으로 작성하고 Notion이나 위키에 붙여넣기 전에 포맷을 미리보기하세요.
  • 뉴스레터 게시물 작성 — 마크다운으로 작성하고 Substack이나 Beehiiv에 붙여넣기 전에 미리보기하세요.
  • Stack Overflow 답변 포맷 — 제출하기 전에 코드 펜스, 목록 및 링크를 미리보기하세요.

예시

Headings and emphasis
입력
# Title

**bold** and *italic* text.

- list item
- another
출력
<h1>Title</h1>
<p><strong>bold</strong> and <em>italic</em> text.</p>
<ul><li>list item</li><li>another</li></ul>

자주 묻는 질문

어떤 마크다운 확장 기능이 지원되나요?

GitHub 스타일 마크다운: 테이블, 코드 블록, 자동 링크, 작업 목록, 취소선. 각주와 주의 사항은 지원되지 않습니다.

마크다운 안에 HTML을 사용할 수 있나요?

네, 하지만 출력은 정화됩니다 — `<script>`, `<style>`, 및 이벤트 속성은 렌더링 전에 제거됩니다.

렌더링된 HTML을 내보낼 수 있나요?

브라우저의 소스 보기 또는 DevTools를 사용하여 렌더링된 HTML을 복사하세요. 미리보기에서 마우스 오른쪽 버튼을 클릭하고 '프레임 소스 보기'를 선택하세요.

코드 블록은 구문 강조가 되나요?

아니요 — 코드 블록은 모노스페이스 스타일로 렌더링되지만 언어 색상 강조는 없습니다. 이를 위해 로컬에서 `markdown-it` + `highlight.js`와 같은 마크다운 프로세서를 추가하세요.

입력이 서버로 전송되나요?

아니요. 파싱과 렌더링은 브라우저에서 발생합니다.