마크다운 미리보기·HTML 변환

마크다운 미리보기·HTML 변환 사용법

마크다운은 #, -, ** 같은 간단한 기호로 제목과 목록, 강조를 적는 글쓰기 방식입니다. 깃허브의 README, 노션, 옵시디언, 여러 블로그와 게시판이 이 방식을 씁니다. 이 도구는 마크다운이 실제로 어떻게 보일지 쓰면서 확인하고, 웹에 올릴 수 있는 HTML로 바꾸고, 반대로 HTML을 마크다운으로 되돌립니다.

마크다운을 HTML로 바꾸는 순서

1. 왼쪽 칸에 마크다운을 쓰거나 붙여 넣습니다. 파일 열기나 끌어다 놓기로 md 파일을 불러올 수 있습니다.
2. 오른쪽에 미리보기가 바로 나옵니다. 보기를 HTML 코드로 바꾸면 변환된 태그를 볼 수 있습니다.
3. HTML 복사로 태그만 가져가거나 HTML 파일로 저장으로 파일을 받습니다. 종이나 PDF가 필요하면 인쇄 · PDF 로 저장을 누릅니다.

예시

# 제목 한 줄을 넣으면 HTML 코드는 <h1 id="제목">제목</h1> 입니다. **굵게** 쓰기 는 <p><strong>굵게</strong> 쓰기</p> 가 됩니다. 예시 버튼의 회의록은 제목 4개, 번호 목록, 체크 목록, 표, 인용, 코드 블록이 들어 있어 자주 쓰는 문법을 한 번에 볼 수 있습니다.

자주 쓰는 문법

쓰는 중에 알려 주는 실수

미리보기 아래에 주황색으로 다음 세 가지를 줄 번호와 함께 알려 줍니다. 모두 문법 오류는 아니어서 변환은 되지만 뜻한 대로 보이지 않는 경우입니다.

• #제목 처럼 # 뒤에 공백이 없어 제목이 되지 않은 줄
• 세 개의 백틱으로 연 코드 블록을 닫지 않아 뒤의 글이 전부 코드로 보이는 경우
• 표의 첫 줄 아래에 구분 줄(|---|---|)이 없어 표가 되지 않은 경우

옵션

• 엔터 한 번도 줄바꿈으로: 원래 규칙에서는 엔터 한 번이 무시되고 빈 줄이 있어야 문단이 나뉩니다. 깃허브의 댓글이나 메신저처럼 엔터를 치는 대로 줄을 바꾸려면 켭니다.
• 제목에 id 붙이기: 제목 태그에 id를 넣어 목차 링크와 #제목 주소로 바로 갈 수 있게 합니다. 다른 사이트의 글 편집기에 붙여 넣을 HTML이면 그 사이트가 id를 지우는 경우가 많으니 꺼도 됩니다.
• 저장할 때 바로 열리는 완성된 문서로: 켜면 글꼴, 표 테두리, 코드 배경 같은 기본 모양이 든 완전한 HTML 문서로 저장해 더블클릭으로 바로 볼 수 있습니다. 끄면 본문 태그만 저장합니다.

목차 만들기

제목이 하나라도 있으면 아래에 목차가 생깁니다. 펼쳐서 제목을 누르면 미리보기가 그 자리로 움직입니다. 목차를 마크다운으로 복사는 - [결정한 것](#결정한-것) 같은 링크 목록을 복사하고, 글 맨 위에 목차 넣기는 그 목록을 글 첫머리에 넣습니다. 제목 단계에 따라 두 칸씩 들여써서 안쪽 목록으로 만듭니다.

HTML을 마크다운으로 바꾸기

HTML → 마크다운 탭은 반대 방향입니다. HTML 코드를 붙여 넣어도 되고, 웹 페이지나 워드 문서에서 글을 복사해 그대로 붙여 넣어도 됩니다. 뒤의 경우 서식 있는 글을 붙여 넣으면 HTML 로 받기가 켜져 있으면 클립보드에 든 서식을 HTML로 받아 변환합니다. 예를 들어 <p>주문 후 <strong>2~3일</strong> 안에 도착합니다.</p> 는 주문 후 **2~3일** 안에 도착합니다. 가 됩니다.

• 제목: # 제목 꼴과 제목 아래에 === 를 긋는 꼴 가운데 고릅니다. 뒤의 것은 1, 2단계 제목에만 쓰입니다.
• 목록 기호와 강조: 쓰는 곳의 관례에 맞춥니다. 결과는 같습니다.
• 링크: 주소를 글 안에 둘지, 글에는 번호만 두고 주소를 문서 아래에 모을지 고릅니다. 긴 주소가 많은 글은 모으는 쪽이 읽기 편합니다.

표, 취소선, 체크 목록은 깃허브 방식 마크다운으로 바꿉니다. 글자 색, 크기, 가운데 정렬, 셀 합치기처럼 마크다운에 없는 서식은 사라지고 스크립트와 스타일은 뺍니다. 미리보기로 확인을 누르면 결과를 첫 탭으로 보내 어떻게 보이는지 바로 확인할 수 있습니다.

파일 여러 개를 한 번에

첫 탭에서 md 파일을 두 개 이상 고르면 모두 HTML로 바꿔 ZIP으로 저장하고, 둘째 탭에서 html 파일을 여러 개 고르면 모두 md로 바꿔 ZIP으로 저장합니다.