마크다운 미리보기
마크다운을 쓰면 입력하는 대로 렌더링해 보여 주고 HTML도 복사할 수 있습니다. 원시 HTML은 텍스트로 표시되고 링크는 검사되므로 미리보기에서 아무것도 실행되지 않습니다.
코드 예제
내 프로젝트에 그대로 복사해서 쓰세요. 모든 예제는 해당 언어의 표준 라이브러리만 사용하므로 설치할 것이 없습니다.
const text = '# Hello\n\nSome **bold** text <b>raw</b>'
const escaped = text.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
const html = escaped
.split('\n\n')
.map((block) =>
block.startsWith('# ')
? `<h1>${block.slice(2)}</h1>`
: `<p>${block.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')}</p>`,
)
.join('\n')
console.log(html)기능
입력하는 대로 마크다운을 렌더링된 페이지로 보여 주고 HTML을 제공합니다. CommonMark와 대부분의 문서가 쓰는 GitHub 확장(표, 작업 목록, 취소선, 자동 링크)을 읽습니다.
사용 방법
- 마크다운을 입력하거나 붙여넣거나 텍스트 파일을 끌어다 놓으세요.
- 미리보기로 렌더링된 페이지를, HTML로 마크업을 확인하세요. 채팅 메시지처럼 한 번의 줄바꿈으로 새 줄을 시작하려면 줄바꿈을 켜세요.
- HTML을 복사하거나 다운로드하세요.
예시
# 안녕하세요는 <h1>안녕하세요</h1>이 되고 **굵은** 글씨는 <strong>굵은</strong> 글씨가 됩니다. 세로선과 하이픈으로 쓴 표는 실제 표가 되고 - [x] 완료는 체크된 상자가 됩니다.
알아 두면 좋은 점
- 소스의 원시 HTML은 텍스트로 표시될 뿐 전달되지 않으므로 붙여넣은 마크다운 속 script 태그나 이벤트 핸들러는 아무것도 할 수 없습니다.
- 웹·메일·전화 링크와 상대 주소만 링크로 남습니다.
javascript:링크는 일반 텍스트로 남습니다. - 미리보기에서는 이미지를 불러오지 않습니다. 설명과 주소가 보이며 복사한 HTML에는 이미지 태그가 들어 있습니다.
- 한도는 100,000자입니다.
미리보기는 무엇을 지원하나요?
CommonMark와 가장 많이 쓰는 GitHub 확장(표, 작업 목록, 취소선, 자동 링크)을 지원합니다. 모든 변환은 브라우저에서 이루어집니다.
자주 묻는 질문
원시 HTML이 왜 텍스트로 표시되나요?
마크다운 안의 원시 HTML은 스크립트를 실행할 수 있어 그대로 통과시키지 않습니다. script 태그 등 마크업은 입력한 그대로 표시됩니다. 대신 마크다운 문법을 사용하세요. 복사하는 HTML도 같은 방식으로 이스케이프됩니다.
이미지는 왜 불러오지 않나요?
이미지는 가져오지 않으므로 미리보기로 사용자를 추적하거나 다른 사이트의 무언가를 불러올 수 없습니다. 설명과 주소는 일반 텍스트로 보입니다. 복사한 HTML에는 이미지 태그가 들어 있습니다.
이 도구가 내 텍스트를 어딘가로 보내나요?
아니요. 모든 것이 브라우저에서 이루어지며, 입력한 내용은 저희 서버로 전송되지 않습니다.