세상의 모든 유틸사용 방법
- 왼쪽 칸에 마크다운을 붙여 넣으면 버튼을 누르지 않아도 바로 미리보기와 HTML 코드가 만들어집니다.
- 오른쪽 미리보기는 실제로 브라우저가 그리는 모습이고, 그 아래 HTML 코드 칸에는 붙여 쓸 수 있는 결과가 들어갑니다.
- 제목을 하나라도 쓰면 목차가 자동으로 생기고, 각 제목에는 앵커 주소가 붙습니다.
- 글자 수, 공백을 뺀 글자 수, 낱말 수, 줄 수, 예상 읽는 시간이 결과 맨 위에 함께 나옵니다.
- 변환할 수 없는 부분이나 막은 주소가 있으면 결과 아래에 알림으로 알려 줍니다.
입력한 글은 서버로 전송되지 않습니다. 변환, 미리보기, 글자 수 계산은 모두 이 페이지에서 내려받은 자바스크립트가 브라우저 안에서 처리하며, 어디에도 저장하거나 올려보내지 않습니다. 회사 문서나 공개 전 원고도 안심하고 붙여 넣을 수 있습니다.
지원하는 문법
아래 표는 이 페이지를 만들 때 실제 변환기를 돌려 얻은 결과입니다. 왼쪽처럼 쓰면 오른쪽 HTML이 나옵니다.
| 문법 | 쓰는 법 | 만들어지는 HTML |
|---|---|---|
| 제목 (1~6단계) | ## 소제목 | <h2 id="md-소제목">소제목</h2> |
| 굵게 | **굵게** | <p><strong>굵게</strong></p> |
| 기울임 | *기울임* | <p><em>기울임</em></p> |
| 굵게+기울임 | ***둘 다*** | <p><strong><em>둘 다</em></strong></p> |
| 취소선 | ~~취소선~~ | <p><del>취소선</del></p> |
| 인라인 코드 | `코드` | <p><code>코드</code></p> |
| 링크 | [이름](https://example.com) | <p><a href="https://example.com" rel="nofollow noopener noreferrer" target="_blank">이름</a></p> |
| 이미지 |  | <p><img src="/cat.png" alt="대체글" loading="lazy" /></p> |
| 인용 | > 인용문 | <blockquote>
<p>인용문</p>
</blockquote> |
| 순서 없는 목록 | - 항목 | <ul>
<li>항목</li>
</ul> |
| 순서 있는 목록 | 1. 항목 | <ol>
<li>항목</li>
</ol> |
| 수평선 | --- | <hr /> |
| 줄바꿈 (공백 두 칸) | 첫 줄
둘째 줄 | <p>첫 줄<br />
둘째 줄</p> |
제목은 # 한 개부터 여섯 개까지이고, 기호 뒤에 공백이 있어야 제목이 됩니다. 그래서 해시태그처럼 붙여 쓴 #할인은 제목이 되지 않고 그대로 글자로 남습니다. 목록은 두 칸 이상 들여쓰면 중첩되고, 목록 안에 코드 블록이나 인용을 넣을 수도 있습니다. 목록 표시가 점에서 번호로 바뀌면 새 목록이 시작됩니다.
표와 코드 블록
표는 머리글 줄과 하이픈 구분줄로 만듭니다. 구분줄에 콜론을 넣어 칸마다 정렬을 정할 수 있습니다. 왼쪽 정렬은 :---, 가운데는 :---:, 오른쪽은 ---:입니다.
| 입력 | 결과 HTML |
|---|---|
| 이름 | 수량 | 금액 | | :--- | :---: | ---: | | 연필 | 2 | 1,200 | | <div class="table-wrap"> <table> <thead> <tr><th style="text-align: left">이름</th><th style="text-align: center">수량</th><th style="text-align: right">금액</th></tr> </thead> <tbody> <tr><td style="text-align: left">연필</td><td style="text-align: center">2</td><td style="text-align: right">1,200</td></tr> </tbody> </table> </div> |
```python
print("안녕")
``` | <pre data-lang="python"><code class="language-python">print("안녕")</code></pre> |
코드 블록은 백틱 세 개로 여닫습니다. 여는 줄에 언어 이름을 적으면 결과에 language-로 시작하는 클래스가 붙어, 색을 칠해 주는 도구와 그대로 이어 쓸 수 있습니다. 코드 블록과 인라인 코드 안에서는 별표나 밑줄, 대괄호가 문법으로 해석되지 않고 적은 그대로 남습니다. 닫는 줄을 빠뜨리면 문서 끝까지 코드로 보고 그 사실을 알려 줍니다.
원시 HTML을 왜 막는가
미리보기는 남이 쓴 글을 화면에 그리는 자리입니다. 마크다운 안의 HTML 태그를 그대로 그리면 스크립트가 이 페이지에서 실행될 수 있고, 그 스크립트는 화면을 바꾸거나 다른 입력칸의 내용을 읽어 밖으로 보낼 수도 있습니다. 그래서 이 도구는 기본값으로 꺾쇠, 따옴표, 앰퍼샌드를 모두 이스케이프해 태그를 글자로 바꿉니다. 링크와 이미지 주소도 따로 검사해서, 스크립트를 실행하는 스킴과 SVG data URL은 아예 주소로 쓰지 않습니다. 아래는 그런 입력이 실제로 어떻게 바뀌는지 빌드할 때 변환기를 돌려 얻은 결과입니다.
| 입력 | 이 도구의 결과 |
|---|---|
<script>alert(1)</script> | <p><script>alert(1)</script></p> |
<img src=x onerror=alert(1)> | <p><img src=x onerror=alert(1)></p> |
[클릭](javascript:alert(1)) | <p>클릭</p> |
[클릭](javascript:alert(1)) | <p>클릭</p> |
 | <p>그림</p> |
막는 방법을 하나 더 적어 두면, 주소는 겉모양만 보지 않습니다. 대소문자를 섞은 것, 앞뒤에 공백이나 보이지 않는 글자를 끼운 것, 숫자 엔티티로 감춘 것을 모두 같은 주소로 보고 판단합니다. 허용하는 스킴은 http, https, mailto, tel, sms, ftp와 스킴이 없는 상대 주소뿐입니다.
목차와 글자 수
제목마다 앵커 id를 만들고 그것으로 목차를 엮습니다. 한글 제목은 그대로 id가 되고, 같은 제목이 여러 번 나오면 뒤에 번호를 붙여 서로 겹치지 않게 합니다. 예상 읽는 시간은 한글과 한자는 분당 500자, 그 밖의 낱말은 분당 220개로 잡아 더합니다. 예시 넣기로 들어가는 문서는 문법 기호를 뺀 339자, 10덩어리여서 읽는 시간이 1분 미만으로 나옵니다.
알아 둘 점
- 한 번에 변환할 수 있는 크기는 1MB까지입니다. 그보다 크면 변환하지 않고 크기만 알려 줍니다.
- 각주, 정의 목록, 수식, 문서 앞머리 설정(front matter), 참조 링크는 아직 지원하지 않습니다.
- 공백 네 칸으로 만드는 코드 블록은 목록 들여쓰기와 헷갈리기 쉬워 지원하지 않습니다. 백틱 세 개를 써 주세요.
- 결과 HTML에는 꾸미는 스타일이 들어 있지 않습니다. 붙여 쓰는 곳의 스타일을 그대로 따릅니다.
- 바깥으로 나가는 링크에는 새 창으로 열리도록 하는 속성과 추천을 막는 속성이 함께 붙습니다.
이 도구는 CommonMark와 GitHub 표 문법을 기준으로 삼되, 미리보기에서 안전한 쪽으로 다르게 처리하는 부분이 있습니다. 깃허브나 다른 편집기와 결과가 조금 다를 수 있으니, 최종 결과는 실제로 붙여 쓸 곳에서 한 번 더 확인해 주세요.