MarkdownEditor는 마크다운을 입력하면 HTML 미리보기가 실시간으로 표시되는 무료 온라인 편집기입니다. 설치나 회원가입 없이 브라우저에서 바로 사용할 수 있으며, 작성한 내용을 HTML 파일이나 .md 파일로 저장할 수 있습니다. 모든 처리가 브라우저 내에서만 이루어지므로 입력한 내용이 외부 서버로 전송되지 않습니다.
주요 기능
실시간 미리보기
마크다운을 입력하는 즉시 오른쪽 패널에 HTML 미리보기가 표시됩니다. 별도의 변환 버튼이 필요 없습니다.
툴바 버튼
H1~H3, 굵게, 기울임, 취소선, 코드, 목록, 인용, 링크 등 자주 쓰는 마크다운 구문을 버튼 한 번으로 삽입합니다.
파일 저장
작성한 내용을 HTML 파일 또는 .md 파일로 다운로드합니다. HTML 저장 시 기본 스타일이 포함됩니다.
XSS 안전 처리
DOMPurify 라이브러리를 사용해 마크다운에 삽입된 악성 스크립트를 자동으로 제거합니다.
기본 사용법
1
마크다운 입력
왼쪽 입력창에 마크다운을 입력합니다. 입력하는 즉시 오른쪽에 HTML 미리보기가 표시됩니다. 샘플 버튼으로 예제 문서를 바로 불러올 수도 있습니다.
2
툴바 버튼 활용 (선택)
상단 툴바에서 원하는 서식 버튼을 클릭합니다. 텍스트를 선택한 상태로 버튼을 클릭하면 선택 영역에 서식이 적용됩니다.
3
저장 또는 복사
하단 버튼으로 HTML 복사, 마크다운 복사, HTML 파일 저장, .md 파일 저장 중 원하는 방식으로 내보냅니다.
툴바 버튼 설명
| 버튼 | 기능 | 삽입되는 마크다운 |
|---|---|---|
| H1 / H2 / H3 | 제목 1~3 | # / ## / ### |
| B (굵게) | 선택 텍스트를 굵게 | **텍스트** |
| I (기울임) | 선택 텍스트를 기울임 | *텍스트* |
| S (취소선) | 선택 텍스트에 취소선 | ~~텍스트~~ |
| </> (코드) | 인라인 코드 | `코드` |
| • 목록 | 순서 없는 목록 | - |
| 1. 목록 | 순서 있는 목록 | 1. |
| " 인용 | 인용문 | > |
| 코드 | 코드 블록 | ```\n\n``` |
| 링크 | 하이퍼링크 | [텍스트](URL) |
| 이미지 | 이미지 삽입 |  |
| 구분선 | 수평 구분선 | --- |
마크다운 문법 빠른 참고
제목과 강조
마크다운 입력
# 제목 1 ## 제목 2 ### 제목 3 **굵은 텍스트** *기울임 텍스트* ~~취소선 텍스트~~
HTML 미리보기
제목 1
제목 2
제목 3
굵은 텍스트
기울임 텍스트취소선 텍스트
목록과 인용
마크다운 입력
- 항목 1 - 항목 2 - 중첩 항목 1. 첫 번째 2. 두 번째 > 인용문 내용 > 여러 줄도 가능합니다
HTML 미리보기
- 항목 1
- 항목 2
- 중첩 항목
- 첫 번째
- 두 번째
인용문 내용
여러 줄도 가능합니다
코드와 링크
마크다운 입력
인라인 `코드`는 백틱으로
```javascript
function hello() {
return "world";
}
```
[BrowserKit](https://browserkit.pages.dev)
HTML 미리보기
파일 저장 옵션
| 버튼 | 파일명 | 내용 | 용도 |
|---|---|---|---|
| HTML 복사 | — | 렌더링된 HTML 태그 | 블로그, 위지윅 에디터에 붙여넣기 |
| 마크다운 복사 | — | 원본 마크다운 텍스트 | GitHub, Notion 등에 붙여넣기 |
| HTML 저장 | markdown_export.html | 기본 CSS 스타일 포함 HTML | 독립 웹페이지로 공유 |
| .md 저장 | document.md | 순수 마크다운 텍스트 | GitHub, VS Code 등에서 편집 |
Tab 키 들여쓰기
입력창에서 Tab 키를 누르면 공백 2칸이 삽입됩니다. 코드 블록 안에서 들여쓰기를 작성하거나 중첩 목록을 만들 때 편리합니다.
활용 예시
블로그 글 초안 작성
마크다운으로 글을 작성하고 HTML로 복사해 티스토리, 네이버 블로그 HTML 편집 모드에 붙여넣습니다.
README 작성
GitHub 저장소의 README.md를 작성하고 미리보기로 확인한 뒤 .md 파일로 저장합니다.
문서 빠른 정리
회의록, 기획서, 메모를 마크다운으로 빠르게 구조화하고 HTML 파일로 저장해 공유합니다.
마크다운 학습
마크다운 문법을 입력하면서 결과를 바로 확인할 수 있어 처음 마크다운을 배우는 분들에게 유용합니다.
HTML 이메일 본문
마크다운으로 이메일 내용을 작성하고 HTML로 복사해 이메일 HTML 편집기에 붙여넣습니다.
기술 문서 작성
API 문서, 개발 가이드 등을 마크다운으로 작성하고 HTML 파일로 내보내 팀 위키에 업로드합니다.
마크다운이란?
마크다운은 2004년 John Gruber가 만든 경량 마크업 언어입니다. #, **, - 같은 간단한 기호로 제목, 굵기, 목록을 표현하며, HTML보다 훨씬 읽기 쉽고 작성하기 편합니다. GitHub, Notion, Obsidian, Discord, Slack 등 대부분의 현대 서비스에서 마크다운을 지원합니다.
📝 MarkdownEditor는 marked.js로 마크다운을 HTML로 변환하고, DOMPurify로 악성 스크립트를 제거합니다. 모든 처리가 브라우저 내에서만 이루어지므로 입력한 내용이 외부 서버로 전송되지 않습니다.