📝
무료 Markdown 편집기
실시간으로 Markdown을 작성하고 미리 봅니다. 제목, 굵게, 기울임꼴, 코드 블록, 표, 목록을 지원합니다.
한 번 로드하면 오프라인에서도 작동
80 단어 · 386 자
Markdown
미리보기
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">마크다운 에디터에 오신 것을 환영합니다</h2>
<p class="my-3 text-slate-700 dark:text-slate-300 leading-relaxed">왼쪽에서 <strong>마크다운</strong>을 작성하면 오른쪽에서 실시간 미리보기를 확인합니다.</p>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">기능</h3>
<ul class="list-disc list-inside my-3 space-y-0.5 text-slate-700 dark:text-slate-300"><li class="my-0.5"><strong>굵게</strong>, <em>기울임</em>, <del>취소선</del></li><li class="my-0.5"><code class="bg-slate-100 dark:bg-slate-800 text-pink-600 dark:text-pink-400 rounded px-1 py-0.5 text-[0.85em] font-mono">인라인 코드</code>와 코드 블록</li><li class="my-0.5"><a href="https://libratool.com" target="_blank" rel="noopener noreferrer" class="text-teal-600 dark:text-teal-400 underline underline-offset-2">링크</a></li><li class="my-0.5">목록, 인용구, 테이블 등</li></ul>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">코드 예시</h3>
<pre class="bg-slate-900 dark:bg-slate-950 text-slate-100 rounded-lg p-4 overflow-x-auto text-sm font-mono my-4"><code class="language-javascript">function greet(name) {
return `Hello, ${name}!`;
}</code></pre>
<blockquote class="border-l-4 border-teal-400 dark:border-teal-600 pl-4 my-3 text-slate-600 dark:text-slate-400 italic">마크다운은 2004년 John Gruber가 웹 글쓰기를 쉽게 하기 위해 만들었습니다.</blockquote>
<table class="my-4 w-full text-sm border-collapse"><thead><tr><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">기능</th><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">지원됨</th></tr></thead><tbody><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">제목</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">목록</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">테이블</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">코드</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr></tbody></table>
Markdown 치트시트
# Heading 1H1
**bold**굵게
*italic*기울임
`code`인라인 코드
- item글머리 목록
1. item번호 목록
> quote인용문
[text](url)링크
이미지
---구분선
주요 용도
- Markdown으로 API 문서 작성Markdown으로 엔드포인트 설명, 요청/응답 예시 및 매개변수 테이블을 작성합니다.
- Markdown으로 메모 작성Markdown으로 구조화된 메모를 작성하여 Notion, Obsidian, Bear 또는 모든 Markdown 앱에 붙여넣을 수 있습니다.
- Markdown으로 GitHub README 작성라이브 Markdown 렌더링으로 GitHub 저장소 README를 작성하고 미리 봅니다.
- 기술 문서 작성게시하기 전에 Markdown으로 API 문서, 위키 및 기술 가이드를 작성하고 미리 봅니다.
- Markdown으로 블로그 게시물 작성Ghost, Jekyll, Hugo, Hashnode 및 기타 Markdown 기반 게시 플랫폼용 블로그 게시물을 작성합니다.
사용 방법
미리보기는 도구에 직접 내장된 Markdown 파서로 렌더링됩니다. marked, remark, 외부 라이브러리가 없습니다. 브라우저에서 소스를 한 줄씩 토큰화해 구문을 HTML로 변환한 뒤, 표시 전에 정화기를 거칩니다.
- 1줄 단위 토큰화자체 renderMarkdown 함수가 소스를 줄바꿈으로 나누고 한 번의 순회로 펜스 코드 블록, 제목(H1–H6), 인용문, 순서 있는/없는 목록, GFM 표(열 정렬 포함), 가로줄, 문단을 우선순위대로 찾아냅니다.
- 2인라인 구문 확장수집된 각 줄이나 셀은 inlineMarkdown에서 처리됩니다. 굵게(**와 __), 기울임(*와 _), 굵은 기울임(***), 취소선(~~), 인라인 코드(), 이미지(), 링크([text](url))를 다루는 정규식 치환 체인이며, ! 접두사가 잘못 소비되지 않도록 이미지를 링크보다 먼저 처리합니다.
- 3정화와 원격 리소스 차단렌더러가 만든 원시 HTML은 정화기(sanitize-html)를 거쳐 <script>, onerror 처리기, javascript: href 같은 안전하지 않은 태그와 속성이 제거됩니다. 두 번째 단계(neutralizeRemote)는 기본적으로 원격 이미지 src 값을 자리 표시자로 바꿔, 사용자가 허용하기 전에 미리보기가 외부 서버에 조용히 요청을 보내지 않게 합니다.
- 4.md 또는 독립 실행형 .html로 내보내기Markdown을 복사하거나 다운로드하면 원시 소스 텍스트가 기록됩니다. HTML을 다운로드하면 정화된 출력을 자체 인라인 스타일시트가 있는 독립 문서로 감쌉니다. Tailwind 클래스는 사이트 안에서만 작동하므로, 내보내기에는 대신 일반 CSS 규칙이 포함되어 어디서나 파일을 읽을 수 있습니다.
관련 도구
HTML을 Markdown으로 변환기
HTML을 깔끔한 Markdown으로 변환합니다. 제목, 목록, 링크, 이미지, 코드 블록, 표, 인용문을 처리합니다. CMS에서 콘텐츠를 이동하기에 완벽합니다.
시도해보기
Markdown을 HTML로 변환기
라이브 미리보기로 Markdown을 깔끔한 HTML로 변환합니다. 소스 뷰를 사용하여 블로그, CMS, 이메일 템플릿에 바로 붙여넣을 수 있는 HTML을 복사합니다.
시도해보기
Mermaid 다이어그램 편집기
라이브 미리보기와 함께 Mermaid 구문으로 플로우차트, 시퀀스 다이어그램, 간트 차트 등을 작성합니다. SVG 또는 PNG로 내보내기. 브라우저에서 완전히 실행됩니다.
시도해보기