Markdown 미리보기

Markdown 텍스트를 실시간으로 HTML로 렌더링하여 미리보기합니다.

Markdown 입력

243자 30줄

미리보기

Markdown 미리보기

제목과 서식

굵은 글씨, 기울임, 취소선

코드

인라인 코드와 코드 블록:

const hello = "world";
console.log(hello);

목록

  • 첫 번째 항목
  • 두 번째 항목
  • 세 번째 항목
  1. 순서 있는 항목
  2. 두 번째 항목
인용문입니다.

링크 예시

243자, 30줄

결과 공유하기

Markdown 미리보기 도구는 Markdown 텍스트를 입력하면 실시간으로 렌더링된 결과를 확인할 수 있는 도구입니다. 제목, 굵은 글씨, 기울임, 코드 블록, 목록, 인용문, 링크 등 주요 Markdown 문법을 지원합니다. GitHub README, 블로그 포스트, 기술 문서 등을 작성할 때 미리보기를 통해 최종 결과물을 확인하면서 작성할 수 있어 생산성이 크게 향상됩니다.

실생활 예시

이럴 때 이렇게 계산해요.

  • GitHub README 작성

    사례 01

    오픈소스 프로젝트의 README.md를 작성할 때 미리보기로 최종 렌더링 결과를 확인합니다.

    실시간 미리보기로 서식 오류를 즉시 발견하고 수정할 수 있습니다.

  • 블로그 포스트 작성

    사례 02

    Jekyll, Hugo, Gatsby 등 정적 사이트 생성기에서 블로그 글을 Markdown으로 작성할 때, 실시간 미리보기로 제목 크기, 이미지 삽입, 코드 블록 등이 의도대로 표시되는지 확인합니다.

    별도 빌드 없이 미리보기로 최종 결과물을 즉시 확인하여 작성 속도를 높일 수 있습니다.

  • API 문서 작성

    사례 03

    REST API 문서를 작성할 때 엔드포인트, 파라미터 목록, 요청/응답 JSON 코드 블록을 Markdown 형식으로 정리합니다. 목록 문법으로 파라미터를 깔끔하게 표현합니다.

    Markdown의 목록과 코드 블록 기능으로 구조화된 기술 문서를 효율적으로 작성할 수 있습니다.

  • 회의록 및 메모 정리

    사례 04

    회의 중 메모를 Markdown의 제목(#), 목록(-), 체크박스(- [ ]) 문법으로 빠르게 구조화합니다. 후에 HTML이나 PDF로 변환하여 팀에 공유합니다.

    Markdown의 간결한 문법으로 구조화된 문서를 빠르게 작성하고 다양한 형식으로 변환할 수 있습니다.

같이 쓰면 좋아요. 옆으로 넘겨 보세요.

자주 묻는 질문

궁금한 거 모아 봤어요. 눌러서 펼쳐 보세요.

Markdown이란 무엇인가요?

Markdown은 간단한 텍스트 서식 문법입니다. # 기호로 제목, ** 기호로 굵은 글씨, * 기호로 기울임 등을 표현합니다. GitHub, Notion, 블로그 플랫폼 등에서 널리 사용됩니다.

어떤 Markdown 문법을 지원하나요?

제목(h1~h6), 굵은 글씨, 기울임, 취소선, 코드(인라인/블록), 인용문, 순서/비순서 목록, 링크, 이미지, 구분선 등 주요 문법을 지원합니다.

Markdown에서 표(테이블)는 어떻게 만드나요?

파이프(|)와 하이픈(-)으로 표를 만듭니다. 첫 줄에 헤더, 둘째 줄에 구분선(|---|---|), 셋째 줄부터 데이터를 입력합니다. 콜론(:)으로 좌측/중앙/우측 정렬을 지정할 수 있습니다. 다만 이 미리보기 도구는 표 문법을 아직 렌더링하지 않고 입력한 글자 그대로 보여 줍니다.

Markdown과 HTML의 차이는 무엇인가요?

HTML은 웹 페이지의 구조를 정의하는 마크업 언어이고, Markdown은 HTML보다 훨씬 간결한 문법으로 동일한 서식을 표현합니다. Markdown은 최종적으로 HTML로 변환되어 렌더링됩니다.

코드 블록에 언어별 구문 강조를 적용할 수 있나요?

백틱 세 개(```) 뒤에 언어 이름을 지정하면 구문 강조가 적용됩니다. 예: ```javascript, ```python, ```css 등. 대부분의 Markdown 렌더러에서 지원합니다.

GitHub Flavored Markdown(GFM)이란 무엇인가요?

GitHub에서 확장한 Markdown 문법으로, 체크박스(- [ ]), 취소선(~~), 표(테이블), 자동 링크 변환, 이슈/PR 번호 자동 연결 등 추가 기능을 지원합니다.

계산 원리

Markdown은 2004년 존 그루버(John Gruber)가 아론 스워츠(Aaron Swartz)와 함께 설계한 경량 마크업 언어입니다. 핵심 설계 원칙은 "소스 텍스트 자체가 읽기 쉬워야 한다"는 것으로, 이메일의 텍스트 서식 관례(*, -, > 등)에서 문법을 차용했습니다. Markdown 파서는 텍스트를 AST(Abstract Syntax Tree, 추상 구문 트리)로 변환한 후 HTML로 렌더링합니다.

Markdown의 파싱은 크게 블록 레벨(제목, 단락, 목록, 코드 블록 등)과 인라인 레벨(굵은 글씨, 링크, 코드 등) 두 단계로 이루어집니다. 블록 파싱은 줄 단위로 진행되며, 각 줄의 시작 문자(#, -, >, ``` 등)로 블록 유형을 결정합니다. 인라인 파싱은 블록 내부의 텍스트에서 *, **, `, [ 등의 구분자를 찾아 서식을 적용합니다.

CommonMark 명세(2014년~)는 Markdown의 모호한 부분을 해결하기 위해 만들어진 표준 규격입니다. 예를 들어, 목록 항목의 들여쓰기 규칙, 빈 줄의 해석, 중첩 강조 처리 등에서 구현체마다 달랐던 동작을 통일했습니다. GitHub Flavored Markdown(GFM)은 CommonMark를 확장하여 표, 체크박스, 취소선 등을 추가한 규격입니다.

용어 사전

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 형식으로 작성하는 메타데이터 영역으로, 제목, 날짜, 태그 등을 정의합니다.