Markdown을 입력하면 이곳에 미리보기가 표시됩니다.
개발자 유틸리티
Markdown Preview
Markdown 문법을 입력하면 제목, 목록, 코드블록, 표, 인용문, 링크를 실시간으로 HTML 미리보기하고 변환 결과를 복사할 수 있습니다.
실시간 미리보기
Markdown 입력과 동시에 HTML 렌더링 결과를 확인할 수 있습니다.
문서 작성 보조
README, 블로그 초안, 개발 문서, 릴리즈 노트 작성에 활용할 수 있습니다.
HTML 변환·복사
변환된 HTML을 복사하거나 파일로 다운로드해 재사용할 수 있습니다.
Markdown 입력
왼쪽에 Markdown을 입력하면 오른쪽에서 HTML 미리보기를 확인할 수 있습니다.
Preview 렌더링
제목, 목록, 인용문, 코드블록, 표, 링크를 HTML 형태로 바로 확인합니다.
보안 필터링
미리보기 렌더링 시 위험한 script 태그와 이벤트 속성을 제거하도록 구성합니다.
Editor
Preview
대기 중
Markdown 활용 방식
Markdown은 간단한 문법으로 구조화된 문서를 빠르게 작성할 수 있어 개발 문서와 블로그 초안에 자주 사용됩니다.
README 문서
프로젝트 소개, 설치 방법, 사용법, 코드 예제를 Markdown으로 작성하고 미리볼 수 있습니다.
블로그 초안
제목, 목록, 인용문, 코드블록을 활용해 개발 블로그 글의 초안을 빠르게 정리할 수 있습니다.
HTML 변환
Markdown으로 작성한 내용을 HTML 형태로 변환해 웹페이지나 문서 편집에 활용할 수 있습니다.
사용 방법
README, 개발 문서, 블로그 초안, 릴리즈 노트에 사용할 Markdown 문서를 입력창에 붙여넣습니다.
자동 렌더링, 줄바꿈 유지, 위험 HTML 제거 옵션을 문서 용도에 맞게 설정합니다.
렌더링 버튼을 누르거나 자동 미리보기를 사용해 제목, 목록, 표, 코드블록 결과를 확인합니다.
변환된 HTML을 복사하거나 HTML 파일로 다운로드하고, 원본 Markdown도 필요할 때 바로 복사합니다.
도움말
Markdown Preview란?
Markdown Preview는 Markdown 문법으로 작성한 텍스트를 HTML 형태로 실시간 미리보기할 수 있는 개발자 문서 작성 유틸리티입니다.
README.md, GitHub 문서, 블로그 초안, 개발 노트, 릴리즈 노트, API 문서 작성 시 결과 화면을 빠르게 확인할 수 있습니다.
지원 문법
- 제목: #, ##, ###
- 목록: -, *, 1.
- 강조: **굵게**, *기울임*
- 코드: 인라인 코드, 코드블록
- 링크, 인용문, 표
Markdown은 어디에 많이 사용되나요?
Markdown은 GitHub README, 개발 문서, 블로그 초안, 프로젝트 가이드, 릴리즈 노트, API 문서처럼 구조가 필요한 텍스트 작성에 많이 사용됩니다.
코드블록은 어떻게 작성하나요?
백틱 3개를 사용해 코드블록을 만들 수 있습니다. 예를 들어 ```js로 시작하고 코드를 작성한 뒤 다시 백틱 3개로 닫으면 됩니다.
표는 어떻게 작성하나요?
파이프 문자 |와 구분선 ---을 사용해 표를 만들 수 있습니다. 첫 줄은 헤더, 두 번째 줄은 구분선, 그 아래부터 데이터 행으로 작성합니다.
HTML 복사는 어디에 활용하나요?
변환된 HTML은 웹페이지 편집, 블로그 에디터, 문서 편집기, 템플릿 작업에 활용할 수 있습니다. 다만 서비스마다 허용하는 HTML 태그가 다를 수 있으므로 적용 후 화면을 확인하는 것이 좋습니다.
위험 HTML 제거 옵션은 무엇인가요?
Markdown 안에 포함된 script 태그나 이벤트 속성 같은 위험 요소를 제거해 미리보기 영역에서 실행되지 않도록 하는 옵션입니다.
민감한 내용을 입력해도 되나요?
이 도구는 브라우저에서 Markdown을 미리보기하는 용도입니다. 그래도 API 키, 비밀번호, 개인정보, 내부 문서 내용은 입력 전에 제거하거나 마스킹하는 것을 권장합니다.
Markdown을 안전하게 미리보고 HTML로 옮기는 기준
작성 중인 Markdown을 브라우저에서 즉시 렌더링하고 결과 HTML을 복사하거나 내려받을 수 있습니다. 지원 문법과 보안 필터의 범위를 확인하면 README, 기술 문서, 블로그 초안을 다른 편집기로 옮길 때 예상치 못한 표시 차이를 줄일 수 있습니다.
이런 분께 유용합니다
- README와 개발 문서를 작성하면서 제목·목록·코드 블록을 바로 확인하려는 사용자
- Markdown 초안을 HTML 조각으로 변환해 다른 편집기에 옮기려는 사용자
- 외부 Markdown 렌더러와 결과가 다른 이유를 확인하려는 사용자
대표 활용 상황
- 프로젝트 README의 제목 구조와 표가 의도대로 보이는지 확인할 때
- 블로그 초안의 링크·이미지·인용문을 게시 전에 점검할 때
- 간단한 Markdown 문서를 독립 HTML 파일로 내려받아 공유할 때
처음부터 결과 확인까지
- 1
민감한 토큰, 비밀번호, 고객 정보가 있다면 입력 전에 제거하거나 마스킹합니다.
- 2
Markdown을 입력하거나 예제 불러오기로 지원 문법을 확인합니다.
- 3
위험 HTML 제거 옵션을 켠 상태에서 미리보기 결과와 링크 대상을 확인합니다.
- 4
표, 중첩 목록, 참조 링크처럼 구현 차이가 큰 문법은 최종 게시 서비스에서도 다시 확인합니다.
- 5
HTML 복사 또는 다운로드 결과를 신뢰할 수 있는 편집기에만 붙여넣습니다.
- 6
외부 이미지 링크는 미리보기 시 해당 서버에 요청될 수 있으므로 비공개 주소를 사용하지 않습니다.
README 제목과 목록 확인
- 입력
- # 설치 방법\n\n- 패키지 설치\n- 환경 변수 설정
- 결과
- 1단계 제목과 글머리표 목록
제목 기호 뒤에는 공백을 두고 목록 항목은 줄마다 하이픈 또는 별표로 시작해야 합니다.
위험한 링크 프로토콜 차단
- 입력
- [실행 링크](javascript:alert(1))
- 결과
- 실행 주소 대신 안전한 빈 링크로 처리
도구는 http, https, mailto, tel과 페이지 내부 앵커만 허용합니다. 다만 복사한 HTML을 다른 서비스에서 수정하면 그 서비스의 보안 정책을 다시 따라야 합니다.
계산·처리 기준
입력은 최대 100,000자로 제한됩니다. 도구는 ATX 제목, 문단, 순서·비순서 목록, 인용문, 인라인·펜스 코드, 표, 링크, 이미지, 구분선을 자체 파서로 변환합니다. 사용자 텍스트는 먼저 HTML 이스케이프하고 링크 프로토콜을 허용목록으로 검사한 뒤, 보안 필터가 script·iframe·object·embed·form과 이벤트 속성을 제거합니다.
알아둘 한계
- CommonMark 전체 구현이 아니므로 중첩 목록, 참조형 링크, 각주, 작업 목록과 일부 이스케이프 규칙은 다른 렌더러와 다를 수 있습니다.
- 원시 HTML은 문법 호환성과 보안을 위해 일반 텍스트처럼 표시될 수 있습니다.
- 외부 이미지와 링크의 실제 콘텐츠·안전성·접근 가능 여부를 검사하지 않습니다.
- 다운로드한 HTML은 최소 문서 구조만 포함하며 게시 서비스의 CSS는 포함하지 않습니다.
개인정보 처리
Markdown은 현재 브라우저 메모리에서만 처리하며 서버나 localStorage에 저장하지 않습니다. 외부 이미지 URL을 미리보면 브라우저가 해당 이미지 서버에 요청할 수 있고, 복사·다운로드한 파일에는 입력 내용이 그대로 포함됩니다.
참고 자료
함께 쓰면 좋은 도구
- 정규식 테스터
문서에서 찾을 문자열 패턴을 샘플 데이터로 검증합니다.
- Unix 타임스탬프 변환기
릴리즈 노트나 로그의 시간값을 읽기 쉬운 날짜로 바꿉니다.
자주 묻는 질문
GitHub의 Markdown 결과와 완전히 같나요?
아닙니다. 이 도구는 자주 쓰는 문법을 가볍게 구현한 미리보기입니다. GitHub 확장 문법과 중첩 구조는 최종 게시 위치에서 다시 확인하세요.
보안 필터를 켜면 모든 위험이 사라지나요?
미리보기 영역의 대표적인 스크립트 실행 경로를 줄이지만 외부 링크의 신뢰성까지 보증하지는 않습니다. 알 수 없는 링크와 이미지는 열지 마세요.
입력한 문서는 서버에 저장되나요?
아니요. 현재 브라우저 안에서만 변환하며 새로고침하면 입력 내용이 사라집니다.