Back

Markdown 미리보기

Markdown은 일반 텍스트 구문을 사용하여 서식 있는 텍스트를 만드는 경량 마크업 언어입니다. 문서화, README 파일, 노트 작성에 널리 사용되며, 표시를 위해 HTML로 렌더링됩니다. 이 도구는 실시간 렌더링으로 Markdown을 미리보고, 문서 구조(제목, 링크, 이미지)를 추출하며, HTML로 변환할 수 있습니다.

사양

주요 사용 사례

  • 커밋 전 README.md 파일 미리보기
  • 문서 서식 검토
  • 검증을 위해 문서에서 모든 링크 추출
  • 삽입을 위한 Markdown에서 HTML로 변환
  • 문서 구조 및 탐색 분석

기능

  • HTML 렌더링을 통한 실시간 미리보기
  • 문서 구조 추출 (제목을 목차로)
  • 문서 내 모든 링크 및 이미지 목록
  • 언어 힌트와 함께 코드 블록 감지 및 표시
  • 프론트매터(YAML 메타데이터) 파싱
  • 깔끔한 HTML 출력으로 변환
  • 단어 및 문자 수 통계

예제

기능이 있는 README

사용해 보기 →

제목, 목록, 코드가 포함된 일반적인 프로젝트 README입니다.

# My Project

A brief description of what this project does.

## Installation

```bash
npm install my-project
```

## Features

- **Fast** - Optimized for speed
- **Simple** - Easy to use API
- **Flexible** - Works with any framework

## Links

- [Documentation](https://docs.example.com)
- [GitHub](https://github.com/example/project)

팁

  • 제목에는 #을 사용합니다 (# H1, ## H2, ### H3 등).
  • 코드 블록은 선택적 언어 식별자와 함께 삼중 백틱을 사용합니다.
  • 링크는 [텍스트](url) 구문을, 이미지는 ![대체텍스트](url)을 사용합니다.
  • --- 줄 사이의 프론트매터에 YAML 메타데이터를 포함할 수 있습니다.

이해하기 Markdown 미리보기

Markdown은 2004년 John Gruber가 만든 경량 마크업 언어로, 일반 텍스트로 읽을 수 있으면서 깔끔하게 HTML로 변환되도록 설계되었습니다. 구문은 서식을 시각적으로 암시하는 구두점 문자를 사용합니다: 제목에 #, 강조에 *, 목록에 -, 코드에 백틱. Markdown 파일은 렌더링 없이도 유용하기 때문에, 문서화, README 파일, 기술 문서 작성에서 지배적인 형식이 되었습니다.

CommonMark 사양(2014)은 원래 Markdown의 많은 모호성을 해결했습니다. CommonMark는 엣지 케이스 처리 방법을 정확하게 정의하며, 대부분의 최신 파서가 이를 구현합니다. GitHub Flavored Markdown(GFM)은 테이블, 작업 목록, 취소선, 자동 링크 URL, 구문 강조가 있는 펜스 코드 블록으로 CommonMark를 확장합니다.

GFM은 README 파일, 풀 리퀘스트 설명, 이슈 댓글, 문서화 사이트를 위한 사실상의 표준입니다. 대부분의 문서 플랫폼(Notion, Docusaurus, MkDocs, GitBook)이 GFM 또는 그 상위 집합을 지원합니다.

프론트매터는 Markdown 파일에 구조화된 메타데이터를 추가하기 위한 일반적인 관례입니다. 파일 상단의 --- 줄로 구분된 YAML 블록에 정적 사이트 생성기(Astro, Hugo, Jekyll, Next.js)가 탐색 및 페이지 레이아웃을 구축하는 데 사용하는 제목, 날짜, 저자, 태그를 포함할 수 있습니다.

실제로 "Markdown"은 거의 항상 CommonMark 또는 GFM을 의미합니다. 원래 Markdown 사양은 많은 엣지 케이스를 정의하지 않았으며, CommonMark가 엄격한 사양으로 이러한 모호성을 해결했습니다. GFM은 테이블, 작업 목록, 취소선, 자동 링크 URL로 CommonMark를 확장합니다. Markdown 파서 또는 렌더러를 평가할 때 CommonMark 준수 여부를 확인하는 것이 엣지 케이스 처리 능력의 신뢰할 수 있는 지표입니다.

GFM의 테이블은 파이프(|)로 열을 구분하고 하이픈(-)으로 헤더 구분 행을 만듭니다. 열 정렬은 구분자에 콜론으로 제어합니다: :---는 왼쪽 정렬, :---:는 가운데 정렬, ---:는 오른쪽 정렬입니다. 테이블은 GFM 확장이며 원래 Markdown 구문의 일부가 아닙니다. 파일 맨 앞에 --- 줄로 구분된 프론트매터는 정적 사이트 생성기가 제목, 날짜, 레이아웃, 태그와 같은 페이지 메타데이터에 사용하는 YAML 메타데이터 블록입니다. GitHub는 프론트매터를 파일 상단에 테이블로 렌더링하지만, 모든 렌더러가 이를 처리하는 것은 아닙니다.

펜스 코드 블록은 여는 백틱 뒤에 선택적 언어 식별자와 함께 삼중 백틱을 사용합니다 - 예를 들어, 세 개의 백틱 뒤에 "javascript"가 오는 줄은 구문 강조가 있는 JavaScript 블록을 시작합니다. 사용 가능한 언어 식별자는 렌더링 플랫폼에 따라 다릅니다. 코드를 네 칸 들여쓰기하면 코드 블록이 생성되지만, 강조를 위한 언어를 지정할 수는 없습니다.

← 전체 도구로 돌아가기