마크다운 미리보기 — 입력하면서 바로 결과를 보고 HTML로 가져가기
왼쪽에 마크다운을 쓰면 오른쪽에 결과가 바로 보입니다. 깃허브에서 쓰는 표, 체크박스, 취소선까지 지원하고, 완성된 HTML을 복사해 블로그나 게시판에 붙여넣을 수 있습니다.
마크다운은 '**굵게**'처럼 기호 몇 개로 서식을 표현하는 문법입니다. 깃허브 README, 노션, 디스코드, 옵시디언, 많은 블로그 편집기가 이 문법을 씁니다. 글을 쓰는 동안 결과가 어떻게 보일지 확인하려면 미리보기가 필요합니다.
예전 버전은 정규식 몇 줄로 직접 변환하다 보니 두 가지 문제가 있었습니다. 첫째, 입력한 내용을 그대로 화면에 넣어서 다른 곳에서 복사해 온 글에 `<img src=x onerror=...>` 같은 코드가 섞여 있으면 그 코드가 실제로 실행됐습니다. 브라우저에서 확인해 보니 정말로 실행됐습니다. 둘째, 안내 문구에 적힌 체크박스와 취소선이 동작하지 않았고 `_기울임_`, 중첩 목록, `\*` 같은 이스케이프도 되지 않았습니다.
지금은 널리 쓰이는 마크다운 파서(marked)로 바꾸고, 글 안에 들어 있는 HTML 태그는 실행하지 않고 글자 그대로 보여 줍니다. 링크도 javascript: 처럼 코드가 실행되는 주소는 링크로 만들지 않고 글자만 남깁니다.
자주 쓰는 문법
| 쓰는 법 | 결과 |
|---|---|
| # 제목 / ## 소제목 | 제목 단계 (### 까지 자주 씁니다) |
| **굵게** _기울임_ ~~취소선~~ | 굵게, 기울임, 취소선 |
| - 항목 / 1. 항목 | 목록. 두 칸 들여쓰면 하위 항목 |
| - [ ] 할 일 / - [x] 완료 | 체크박스 목록 |
| [이름](주소) | 링크 |
|  | 이미지 |
| `코드` / ``` 세 개로 감싸기 | 인라인 코드 / 코드 블록 |
| > 인용 | 인용문 |
| | a | b | 와 |---|---| | 표 |
결과를 다른 곳에 붙여넣기
'HTML 복사'를 누르면 변환된 HTML이 클립보드에 들어갑니다. 워드프레스나 티스토리의 HTML 편집 모드, 메일 서명, 사내 위키처럼 마크다운을 지원하지 않는 곳에 그대로 붙여넣을 수 있습니다. 반대로 깃허브, 노션, 디스코드처럼 마크다운을 이해하는 곳에는 왼쪽의 원본을 그대로 붙여넣으면 됩니다.
엔터를 한 번만 쳤을 때 줄이 바뀌게 하려면 '줄바꿈을 그대로 반영'을 켜세요. 마크다운 표준은 한 번의 줄바꿈을 무시하고 한 문단으로 잇지만, 카카오톡이나 디스코드에 익숙한 분들에게는 켜 두는 편이 자연스럽습니다.
글 쓸 때 도움이 되는 점
- •편집기 위쪽에 단어 수와 글자 수가 표시됩니다. 블로그 글이나 과제처럼 분량이 정해진 글에 쓰기 좋습니다.
- •표는 셀 안의 글자 수가 달라도 됩니다. | 로만 구분하면 되고 칸을 맞출 필요는 없습니다.
- •코드 블록 첫 줄에 ```js 처럼 언어를 적으면 붙여넣는 곳에서 색을 입혀 줍니다.
- •빈 줄 하나가 문단을 나눕니다. 제목이나 목록 앞뒤에는 빈 줄을 넣는 편이 안전합니다.
- •입력한 글은 저장되지 않습니다. 긴 글은 파일이나 메모장에 따로 보관하세요.
- •이미지는 인터넷에 올라가 있는 주소만 보입니다. 컴퓨터 안의 파일 경로는 브라우저가 열 수 없어 깨진 이미지로 나옵니다.
자주 묻는 질문
HTML을 직접 섞어 쓸 수 있나요?
미리보기에서는 태그가 글자로 보입니다. 붙여넣은 글에 들어 있는 스크립트가 실행되지 않도록 일부러 그렇게 처리합니다. HTML이 필요하면 변환된 결과를 복사한 뒤 그곳에서 직접 편집하세요.
깃허브에서 본 모습과 똑같나요?
문법 해석은 깃허브와 같은 규칙(CommonMark + GFM)을 따르지만, 글꼴과 색 같은 겉모습은 사이트마다 다릅니다.
쓴 글이 서버로 전송되나요?
아니요. 변환은 모두 브라우저 안에서 이루어집니다.