Markdown 미리보기
Markdown 텍스트를 실시간으로 HTML로 렌더링하여 미리보기합니다.
Markdown 미리보기 도구는 Markdown 텍스트를 입력하면 실시간으로 렌더링된 결과를 확인할 수 있는 도구입니다. 제목, 굵은 글씨, 기울임, 코드 블록, 목록, 인용문, 링크 등 주요 Markdown 문법을 지원합니다. GitHub README, 블로그 포스트, 기술 문서 등을 작성할 때 미리보기를 통해 최종 결과물을 확인하면서 작성할 수 있어 생산성이 크게 향상됩니다.
Markdown 입력
미리보기
Markdown 미리보기
제목과 서식
굵은 글씨, 기울임,코드
인라인 코드와 코드 블록:
const hello = "world";
console.log(hello);
목록
- 첫 번째 항목
- 두 번째 항목
- 세 번째 항목
- 순서 있는 항목
- 두 번째 항목
인용문입니다.
링크 예시
principle
계산 원리
Markdown은 2004년 존 그루버(John Gruber)가 아론 스워츠(Aaron Swartz)와 함께 설계한 경량 마크업 언어입니다. 핵심 설계 원칙은 "소스 텍스트 자체가 읽기 쉬워야 한다"는 것으로, 이메일의 텍스트 서식 관례(*, -, > 등)에서 문법을 차용했습니다. Markdown 파서는 텍스트를 AST(Abstract Syntax Tree, 추상 구문 트리)로 변환한 후 HTML로 렌더링합니다.
Markdown의 파싱은 크게 블록 레벨(제목, 단락, 목록, 코드 블록 등)과 인라인 레벨(굵은 글씨, 링크, 코드 등) 두 단계로 이루어집니다. 블록 파싱은 줄 단위로 진행되며, 각 줄의 시작 문자(#, -, >, ``` 등)로 블록 유형을 결정합니다. 인라인 파싱은 블록 내부의 텍스트에서 *, **, `, [ 등의 구분자를 찾아 서식을 적용합니다.
CommonMark 명세(2014년~)는 Markdown의 모호한 부분을 해결하기 위해 만들어진 표준 규격입니다. 예를 들어, 목록 항목의 들여쓰기 규칙, 빈 줄의 해석, 중첩 강조 처리 등에서 구현체마다 달랐던 동작을 통일했습니다. GitHub Flavored Markdown(GFM)은 CommonMark를 확장하여 표, 체크박스, 취소선 등을 추가한 규격입니다.
faq
자주 묻는 질문
cases
실생활 예시
GitHub README 작성
오픈소스 프로젝트의 README.md를 작성할 때 미리보기로 최종 렌더링 결과를 확인합니다.
실시간 미리보기로 서식 오류를 즉시 발견하고 수정할 수 있습니다.
블로그 포스트 작성
Jekyll, Hugo, Gatsby 등 정적 사이트 생성기에서 블로그 글을 Markdown으로 작성할 때, 실시간 미리보기로 제목 크기, 이미지 삽입, 코드 블록 등이 의도대로 표시되는지 확인합니다.
별도 빌드 없이 미리보기로 최종 결과물을 즉시 확인하여 작성 속도를 높일 수 있습니다.
API 문서 작성
REST API 문서를 작성할 때 엔드포인트, 파라미터 표, 요청/응답 JSON 코드 블록을 Markdown 형식으로 정리합니다. 표 문법으로 파라미터 목록을 깔끔하게 표현합니다.
Markdown의 표와 코드 블록 기능으로 구조화된 기술 문서를 효율적으로 작성할 수 있습니다.
회의록 및 메모 정리
회의 중 메모를 Markdown의 제목(#), 목록(-), 체크박스(- [ ]) 문법으로 빠르게 구조화합니다. 후에 HTML이나 PDF로 변환하여 팀에 공유합니다.
Markdown의 간결한 문법으로 구조화된 문서를 빠르게 작성하고 다양한 형식으로 변환할 수 있습니다.
glossary
용어 사전
- Markdown
- 간결한 텍스트 기호로 서식을 표현하는 경량 마크업 언어로, HTML보다 읽고 쓰기 쉽도록 설계되었습니다.
- AST (Abstract Syntax Tree)
- 소스 코드나 텍스트를 트리 구조로 표현한 것으로, Markdown 파서가 텍스트를 HTML로 변환하는 중간 단계입니다.
- CommonMark
- Markdown의 모호한 규칙을 표준화한 명세로, 구현체 간의 일관된 렌더링 결과를 보장합니다.
- GFM (GitHub Flavored Markdown)
- GitHub에서 CommonMark를 확장한 Markdown 규격으로, 표, 체크박스, 취소선, 자동 링크 등 추가 기능을 포함합니다.
- 블록 요소 (Block Element)
- 제목, 단락, 목록, 코드 블록, 인용문 등 줄 단위로 구분되는 Markdown 요소입니다.
- 인라인 요소 (Inline Element)
- 굵은 글씨, 기울임, 코드, 링크 등 블록 내부 텍스트에 적용되는 서식 요소입니다.
- 프론트매터 (Frontmatter)
- Markdown 파일 상단에 YAML 또는 JSON 형식으로 작성하는 메타데이터 영역으로, 제목, 날짜, 태그 등을 정의합니다.
next tools