마크다운 → HTML

실시간 미리보기로 마크다운을 HTML로 변환

마크다운 입력

마크다운 치트시트

제목

# 제목1
## 제목2
### 제목3

굵게 & 기울임

**굵게**
*기울임*
***둘 다***

링크 [텍스트](url)

이미지 ![대체텍스트](url)

코드

`인라인`
```블록```

- 항목
1. 항목

인용 > 인용문

구분선 ---

마크다운이란?

마크다운은 2004년 John Gruber가 만든 경량 마크업 언어입니다. 일반 텍스트 편집기를 사용하여 서식 있는 텍스트를 작성할 수 있어 읽고 쓰기가 쉽습니다.

마크다운은 문서화, README 파일, 블로그 게시물, 포럼, 메시징 앱에서 널리 사용됩니다.

`; const blob = new Blob([fullHTML], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'document.html'; a.click(); URL.revokeObjectURL(url); showToast('다운로드됨!'); } function loadSample() { markdownInput.value = `# 마크다운에 오신 것을 환영합니다 이것은 **굵은** 텍스트이고 이것은 *기울임* 텍스트입니다. ## 특징 - 쓰기 쉬움 - 깔끔한 문법 - 폭넓은 지원 ### 코드 예시 \`\`\`javascript function hello() { console.log("안녕하세요!"); } \`\`\` \`인라인 코드\`도 이렇게 사용할 수 있습니다. > 이것은 인용문입니다. 중요한 정보를 강조할 때 좋습니다. ### 링크와 이미지 더 많은 정보는 [Google](https://google.com)을 확인하세요. --- 1. 첫 번째 항목 2. 두 번째 항목 3. 세 번째 항목 지금까지입니다!`; convert(); showToast('샘플 로드됨!'); } function clearInput() { markdownInput.value = ''; convert(); } function showToast(msg) { const toast = document.getElementById('toast'); toast.textContent = msg; toast.classList.add('show'); setTimeout(() => toast.classList.remove('show'), 2000); } // Live preview markdownInput.addEventListener('input', convert); // Load sample on start loadSample();