TToolkio
모든 도구블로그

마크다운 미리보기

마크다운을 입력하면 실시간으로 미리보기를 확인할 수 있습니다.

마크다운 미리보기는 작성 중인 마크다운이 어떻게 보일지 실시간으로 보여 줘요. 헤더·굵게/기울임·코드블럭·링크·인용·목록·수평선을 그려 주고, 결과 HTML을 복사할 수 있어요.

마크다운 핵심 문법

  • 헤더: # 1~6개로 H1~H6
  • 굵게/기울임: **굵게**, *기울임*
  • 링크: [텍스트](URL)
  • 이미지: ![alt](URL)
  • 코드: 인라인 `code`, 블록 ```언어
  • 리스트: - 또는 1.
  • 체크박스(GFM): - [ ], - [x]
  • 인용: > 문장
  • 표: | 컬럼 | 컬럼 |
  • 수평선: ---

이 도구의 미리보기는 이미지·체크박스·표는 그리지 않으니, 이 셋은 문법만 참고하세요.

표준 vs GFM(GitHub-Flavored)

마크다운 표준은 두 종이에요.

  • CommonMark: 헤더·리스트·코드 같은 핵심만
  • GFM: CommonMark + 표·체크박스·자동 링크·취소선·코드 syntax highlighting

GitHub·GitLab·Notion·Obsidian·VSCode 다 GFM 지원. 옛 Jekyll·Docusaurus는 별도 플러그인 필요해요.

자주 깨지는 패턴

  • 헤더 앞 빈 줄 누락: 헤더 위에 빈 줄 없으면 인라인으로 합쳐짐
  • 리스트 들여쓰기: 스페이스 2개 또는 4개 일관성, 탭은 깨지기 쉬움
  • 코드블럭 언어 누락: 시작 ```뒤에 js/python 등 명시해야 highlighting
  • < 부등호 escape: 통계 p<0.05 같은 표현은 백틱(`p<0.05`) 또는 &lt;
  • 표 정렬 구분자: |---|---| 줄 빠지면 표 인식 안 됨

자주 묻는 질문

마크다운으로 작성한 글을 워드프레스에 올릴 수 있나요?

WP는 기본은 HTML이지만 Jetpack·WP Markdown 플러그인 깔면 가능해요. 또는 도구의 HTML 출력 복사해서 붙여넣어도 OK.

이미지를 본문 가운데에 정렬하려면?

표준 마크다운에는 정렬 문법이 없어요. HTML <div align="center"> 또는 CSS class를 쓰세요. GitHub README는 가운데 정렬 미지원.

내가 쓴 마크다운이 GitHub과 Notion에서 다르게 보여요

각 플랫폼마다 GFM 확장 범위가 달라요. Notion은 표준에 가깝고, GitHub은 GFM 풀, Obsidian은 위키링크·embed 같은 자체 문법 추가. 호환성 위해 CommonMark 안에서 작성하세요.

함께 보면 좋은 도구

출처 · 근거 자료