Markdown 파서

Markdown을 실시간으로 파싱하고 미리보기하세요. GFM 표, 작업 목록, 취소선 등을 지원합니다. 모든 처리는 브라우저에서 이루어집니다.

실시간 미리보기 GFM 지원 클라이언트 측 처리

HTML 미리보기가 여기에 표시됩니다...

Markdown 파서 사용 방법

1

Markdown 작성

왼쪽 편집기에 Markdown 콘텐츠를 입력하거나 붙여넣으세요.

2

실시간 미리보기

오른쪽 패널에서 렌더링된 HTML 출력을 실시간으로 확인하세요.

3

HTML 복사

프로젝트에서 사용할 생성된 HTML을 복사하세요.

Markdown이란 무엇인가요?

Markdown은 John Gruber가 2004년에 만든 가벼운 마크업 언어입니다. HTML과 다른 여러 형식으로 변환할 수 있는 일반 텍스트 서식 문법을 사용합니다. 문서화, README 파일, 블로그 게시물, 메신저 플랫폼에서 널리 사용됩니다.

지원하는 문법

제목

# 문법으로 H1부터 H6까지

텍스트 서식

굵게, 기울임꼴, 취소선, 인라인 코드

목록과 표

순서 있는 목록, 순서 없는 목록, 작업 목록, GFM 표

코드 블록

구문 강조가 있는 펜스 코드 블록

자주 묻는 질문

GFM이란 무엇인가요?

GFM(GitHub Flavored Markdown)은 GitHub에서 사용하는 Markdown 방언입니다. 표, 작업 목록, 취소선 텍스트, 자동 링크 같은 기능으로 표준 Markdown을 확장합니다.

구문 강조를 지원하나요?

파서는 펜스 코드 블록을 렌더링합니다. 색상이 있는 완전한 구문 강조를 원하면 코드 요소에 스타일을 지정하는 CSS 스타일시트와 함께 사용하면 됩니다.

문서에 사용할 수 있나요?

네! 편집기에 Markdown을 작성하고, 렌더링된 HTML을 복사해 문서, 블로그, 웹사이트에 사용하세요.

Markdown, CommonMark, GFM의 차이는 무엇인가요?

원래 Markdown(2004)은 많은 경계 사례를 정의하지 않아 구현체마다 달라졌습니다. CommonMark는 이를 해결하는 엄격한 사양이고, GFM(GitHub Flavored Markdown)은 CommonMark에 확장을 더한 것입니다: 표, 작업 목록, 취소선, 자동 링크, disallowed-raw-HTML 필터. 이 도구는 GFM을 렌더링하며 GitHub에서 보이는 것과 일치합니다.

코드 블록과 인라인 코드는 어떻게 쓰나요?

인라인 코드는 백틱 하나로 감싸세요. 펜스 블록은 구문 강조를 위해 여는 줄에 ```python처럼 언어 태그와 함께 백틱 세 개를 사용하거나, 모든 줄을 스페이스 4개로 들여씁니다(목록 안에서는 잘 작동하지 않는 오래된 문법). 코드 자체에 백틱이 있을 때는 물결표 세 개도 펜스로 작동합니다.

Markdown에 원시 HTML을 넣을 수 있나요?

네 - 인라인 HTML 태그는 출력으로 그대로 전달됩니다. GFM의 disallowed-raw-HTML 확장은 필터가 켜져 있을 때 소수의 위험한 태그(script, style, iframe 등)만 제거합니다. 주의점 두 가지: 블록 수준 HTML은 콘텐츠를 감싸며 그 안에서는 Markdown 문법 처리가 멈춥니다(빈 줄이 중요), 그리고 사용자가 제출한 Markdown은 태그 필터 외에 반드시 XSS에 대해 살균 처리해야 합니다.

GFM에서 표는 어떻게 작동하나요?

파이프로 구분한 행과 헤더 아래 하이픈 구분선을 사용합니다. 콜론이 정렬을 정합니다: 왼쪽 콜론-대시는 왼쪽 정렬(기본값), 양 끝 콜론은 가운데 정렬, 대시-콜론은 오른쪽 정렬입니다. 셀에는 블록 요소를 넣을 수 없고, 리터럴 파이프는 \|로 이스케이프하세요. 각 행의 바깥 파이프는 선택 사항입니다. 더 복잡한 레이아웃에는 원시 HTML이나 문서 엔진이 필요합니다.

목록이나 중첩 항목이 잘못 렌더링되는 이유는?

흔한 원인: 일관성 없는 들여쓰기(중첩 항목은 보통 부모 항목 콘텐츠의 첫 글자와 정렬해야 함), 단락과 목록 사이 빈 줄 누락, 탭과 스페이스 혼용입니다. CommonMark는 이 모든 것에 정확한 규칙을 정의합니다. 탭을 스페이스로 바꾸고 목록 주위에 빈 줄을 추가하면 대부분의 중첩 버그가 해결됩니다.

{-- * External Resources Component(#18 Phase 3b 内容佐证工程) * 工具页「权威引用」区块:RFC / W3C / WHATWG / ECMA / IANA / 官方规范站 / Wikipedia。 * * - 接受 :slug 属性 → 经 config/tool-sources.php 家族矩阵渲染该工具的权威引用 * - slug 未命中映射时不渲染(无权威来源的工具静默跳过) * - 链接 title 保持英文(引用源专名);description 经 * common.resources.descriptions.{key} 本地化,lang 未命中回退英文(线上不裸奔) * - 链接保持 dofollow(rel="noopener noreferrer") * * @param string|null $slug --}}