📝 마크다운 에디터

실시간 미리보기와 함께 마크다운을 작성하세요

← 메인으로

마크다운 에디터란?

마크다운 에디터는 간단한 텍스트 기반 문법으로 서식이 있는 문서를 작성할 수 있는 도구입니다. GitHub README, 기술 문서, 블로그 포스트, 프로젝트 문서 작성에 널리 사용되며, 작성한 내용을 실시간으로 미리보기하면서 HTML로 변환된 결과를 즉시 확인할 수 있습니다.

UtilHub 마크다운 에디터의 장점

  • 실시간 양방향 미리보기: 작성과 동시에 렌더링 결과를 확인하여 효율적인 문서 작성
  • 빠른 문법 삽입 버튼: H1~H2, Bold, Italic, Link, Image 등 자주 쓰는 문법을 클릭 한 번으로 삽입
  • 다중 포맷 다운로드: 작성한 문서를 .md 파일 또는 스타일이 적용된 .html 파일로 내보내기
  • 프로젝트 템플릿 제공: README 작성을 위한 기본 템플릿으로 빠르게 시작
  • 종합 문법 가이드: 제목, 강조, 리스트, 링크, 코드, 표 등 모든 마크다운 문법 참조 가능
🏠 홈으로✍️ 마크다운 작성
👁️ 미리보기

💡 마크다운 문법 가이드

제목: # H1 ## H2 ### H3
강조: **굵게** *기울임* ~~취소선~~
리스트: - 항목 1. 번호
링크/이미지: [텍스트](URL) ![alt](이미지URL)
코드: `인라인 코드` ```언어 코드블록 ```
인용: > 인용문
표: | 헤더1 | 헤더2 |
|-------|-------|
| 데이터 | 데이터 |
`; const blob = new Blob([html], { 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); } function copyMarkdown() { const text = input.value; if (!text.trim()) { alert('복사할 내용이 없습니다!'); return; } navigator.clipboard.writeText(text).then(() => { alert('클립보드에 복사되었습니다!'); }); } function clearEditor() { if (confirm('작성된 내용을 모두 지우시겠습니까?')) { input.value = ''; updatePreview(); } } function loadTemplate() { const template = `# 프로젝트 제목 ## 개요 프로젝트에 대한 간단한 설명을 작성하세요. ## 주요 기능 - 기능 1 - 기능 2 - 기능 3 ## 설치 방법 \`\`\`bash npm install npm start \`\`\` ## 사용 예시 \`\`\`javascript const example = "Hello World"; console.log(example); \`\`\` ## 기여하기 풀 리퀘스트는 언제나 환영합니다! ## 라이선스 MIT License `; if (input.value.trim() && !confirm('현재 내용을 템플릿으로 교체하시겠습니까?')) { return; } input.value = template; updatePreview(); } // 초기 미리보기 updatePreview();