마크다운 미리보기
마크다운을 붙여넣으면 제목·굵게·목록·표·코드로 렌더해 보여줘요.
이럴 때 쓰세요
이렇게 사용하세요
결과가 예상과 다를 때
결과가 잘려 보여요
전체 결과는 복사 버튼으로 받을 수 있어요.
입력한 내용이 사라졌어요
이 기기에 자동 저장돼요. 브라우저 저장소를 지우면 함께 사라져요.
자주 하는 실수
- 목록 안쪽 글은 마커 너비만큼 들여쓰아야 목록 안에 들어갑니다. `- ` 항목 안에서는 최소 2칸이 필요하고 4칸이면 확실합니다. 들여쓰기가 부족하면 목록 밖 문단이 되고, 과하면 코드 블록으로 취급됩니다.
- 표는 구분 행이 있어야 표로 렌더됩니다. `| 항목 | 값 |` 다음 줄에 `| --- | --- |`을 빠뜨리면 파이프 기호와 대시가 글자로 그대로 화면에 남습니다.
- `**굵게**` 양끝에 공백을 넣으면 강조가 풀립니다. 공통 마크다운 표준은 좌우 구분자 바로 옆 공백을 강조 경계로 인정하지 않아 `** 굵게 **`가 그대로 출력됩니다.
- 코드 블록 안에 마크다운 예시를 넣고 싶으면 바깥 펜스를 세 개 대신 네 개로 여세요. 안쪽의 세 개짜리 표시가 본문이 됩니다. 세 개로 닫으면 렌더링이 끊깁니다.
계산 근거
CommonMark를 기본으로 파싱하고, GitHub Flavored Markdown에서 추가된 표·취소선(~~ ~~)·자동 링크·체크박스 목록을 더해 렌더합니다. 구분 기호는 각 문자를 감싸는 개수가 자릿수를 결정하는 표준 규칙이라 큰 숫자도 아라비아 숫자로 정확히 표현됩니다.
실제로 계산해 보면
`# 제목`과 `**굵게**`는 어떻게 보이나요?
제목은 가장 큰 제목으로, 굵게는 굵은 글씨로 바뀝니다. `#`을 다섯 개 쓰면 가장 작은 제목이 되고, `# 제목` 뒤에 `#`을 더 붙여도 글자만 바뀐 채 큰 제목으로 남습니다.
표가 제대로 나오나요?
다음처럼 구분 행을 넣어야 두 열 두 행의 표가 됩니다. 파이프 세 칸이 아니라 두 칸이므로 열은 두 개입니다. ``` | 항목 | 값 | | --- | --- | | 합계 | 110,000원 | ``` 대시 개수는 열 개수와 맞추는 것이 원칙이고, 빈 칸이 있는 `| --- | --- |` 형태가 가장 널리 호환됩니다.
`snake_case_name`의 밑줄이 사라지나요?
안 사라집니다. 공통 마크다운 표준은 단어와 단어 사이(양옆이 모두 문자)에 있는 `_`를 강조 기호로 보지 않습니다. 반면 `__굵게__`처럼 양끝이 공백이나 문장부호로 둘러싸인 경우는 강조로, `__init__`처럼 밑줄이 단어 양끝에 있는 형태는 강한 강조로 해석됩니다.
더 궁금한 것
글꼴·줄바꿈이 원래 쓰는 곳과 달라요.
마크다운에는 스타일 정보가 없습니다. 렌더링 모양은 프로그램을 만드니 CSS가 결정하기 때문에, 편집기마다 글꼴·줄 간격·표 테두리가 전부 다릅니다. 최종 모양을 맞추려면 쓰는 곳의 스타일에 맞춰 결과로 봐야 합니다.
상대경로 이미지가 안 떠요.
``의 경로는 문서를 놓은 위치 기준입니다. 미리보기 화면은 다른 위치에서 열리므로 파일을 찾지 못합니다. 주소 전체(https://…)를 넣으면 정상 표시되지만, 이미지는 먼저 올려져 있어야 합니다.
기호 자체를 그대로 보여주고 싶어요.
`\*굵게\*`처럼 역슬래시로 묶으면 그 문자가 그대로 나옵니다. 반면 코드 펜스 안에서는 이 비상구가 통하지 않고 모든 문자가 글자로 표시되므로, 문법 설명에는 코드 블록이 가장 확실합니다.
알아둘 경계값
- 제목은 # 뒤에 공백이 있어야 해서 #제목처럼 붙이면 글자로 그대로 남아 버려요.
- # 일곱 개 이상은 제목으로 바뀌지 않고 그대로 화면에 노출돼요.
- 세 개 펜스로 감싼 코드 블록은 지원하지 않아 여러 줄 코드가 줄마다 쪼개져 보여요.
- 링크는 http·https로 시작해야 해서 상대경로·메일·문서 내 이동 표시는 글로 남아요.
- 이미지 문법은 지원하지 않아 앞에 느낌표가 남고 링크처럼 잘려 보여요.
- 목록은 - 대시만 인식돼 1.·*·+로 쓴 목록은 번호 없는 문단으로 나와요.
결과를 믿기 전 확인 목록
- 제목마다 # 뒤에 공백 한 칸이 있는지 앞에서부터 확인해요.
- 표는 열 개수와 구분선 칸 수가 같은지 직접 세어 봐요.
- 한 문단에 별표가 홀수로 남지 않았는지 끝까지 확인해요.
- 링크는 눌러서 새 탭으로 열리는지 직접 시험해요.
- 이미지 자리에 느낌표가 남지 않았는지 미리보기에서 살펴봐요.
- 코드에 백틱이 있다면 줄 단위로 나뉘어 보이는지 확인해요.
- 인용문은 이어지는 매 줄에 기호를 붙였는지 확인해요.
- 목록 사이에 빈 줄이 있다면 두 목록으로 나뉘는지 확인해요.
- #을 일곱 개 넘게 쓰지 않았는지 앞에서부터 세어 봐요.
자주 묻는 질문
어떤 문법을 지원하나요?
제목·굵게·기울임·목록·링크·코드·인용·표를 지원합니다.
결과를 그대로 붙여넣어도 되나요?
HTML로 복사 버튼을 쓰면 렌더된 HTML을 얻어요. 다만 블로그 에디터에 따라 스타일이 달라질 수 있어요.