MultiKit

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

  • 무료
  • 가입 불필요
  • 브라우저에서 실행
  • 버전 1.2.1
  • 마지막 업데이트 2026-10-25
문제 신고

왼쪽에 마크다운을 쓰거나 붙여 넣으면 오른쪽에 결과가 나옵니다. 웹사이트나 이메일에 쓸 HTML은 복사하세요.

마크다운

마크다운에 입력한 HTML 태그는 실행되지 않고 글자로 표시되며, 웹·메일·전화·상대 경로 링크만 남깁니다. ```mermaid 블록은 다이어그램으로 그려집니다.

색이 입혀지는 코드 언어 (193)

백틱 세 개 뒤에 이름이나 별칭을 쓰면 됩니다. 예: ```php, ```js. 언어를 누르면 그 언어의 코드 블록이 글에 들어갑니다. 목록에 없는 이름도 쓸 수는 있지만 색은 입혀지지 않습니다.

입력한 내용은 브라우저 안에서만 처리되며 서버로 전송되지 않습니다.

사용 방법

  1. 왼쪽 상자에 마크다운을 쓰거나 붙여 넣거나 .md 파일을 엽니다. 예시 불러오기로 주요 기능을 볼 수 있습니다.
  2. 미리보기 탭에서 결과를 확인합니다. HTML 탭에서는 만들어진 코드를 봅니다. ```mermaid 코드 블록은 다이어그램으로 그려집니다.
  3. 마크다운이나 HTML을 복사하거나, HTML을 완성된 페이지로 내려받습니다.

예시

# 제목
→ <h1>제목</h1>
**굵게**와 *기울임*
→ <strong>굵게</strong>와 <em>기울임</em>
```mermaid로 시작하는 코드 블록에 sequenceDiagram과 Alice->>Bob: Hi
→ Alice와 Bob 사이에 화살표가 있는 시퀀스 다이어그램
플로차트, 시퀀스, 클래스 다이어그램, 간트 차트 등도 같은 방식으로 그려집니다.
[클릭](javascript:alert(1))
→ 링크 없이 글자 “클릭”만 남습니다
코드를 실행하는 링크는 제거됩니다. 웹, 메일, 전화, 상대 경로 링크는 남습니다.

계산 방식

글은 오픈소스 marked 라이브러리가 CommonMark와 GitHub Flavored Markdown 규칙으로 해석합니다. 결과를 보여 주기 전에 두 겹으로 안전하게 만듭니다. 먼저 여기의 렌더러가 원시 HTML을 글자로 보여 주고, 코드를 실행할 수 있는 주소의 링크와 그림은 버립니다. 다음으로 페이지가 결과를 표준 HTML 정화 도구인 DOMPurify에 한 번 더 통과시킵니다.

코드는 오픈소스 highlight.js 라이브러리가 색을 입히며, 글에 언어가 지정된 코드 블록이 있을 때만 불러옵니다. 쓴 이름대로만 색을 입히고 언어를 추측하지 않습니다. 잘못 추측하면 코드에 엉뚱한 색이 입혀지기 때문입니다. 라이브러리가 코드를 이스케이프하고 span 요소만 더하며, 결과는 보여 주기 전에 DOMPurify를 한 번 더 거칩니다.

다이어그램은 오픈소스 Mermaid 라이브러리가 그리며, 글에 ```mermaid 블록이 있을 때만 불러옵니다. 엄격(strict) 모드로 실행되어 다이어그램의 글자는 정화되고 코드를 실행하는 클릭 연결은 만들 수 없습니다. 머메이드는 그리려면 실제 브라우저가 필요해서 자동 테스트는 그렇지 않은 부분을 확인합니다. mermaid 블록이 글자가 이스케이프된 올바른 요소가 되는지, 다른 코드 블록은 그대로인지, 예시 다이어그램 문법이 올바른지입니다.

색 입히기는 위 언어들, 별칭과 대소문자, HTML이 들어 있는 코드를 테스트합니다. HTML이 든 코드는 무해한 글자로 나와야 합니다. 위 요소들과 표, 체크리스트, 코드 블록도 테스트하고, 공격 사례도 테스트합니다. script 태그, 이벤트 속성, javascript:와 data: 주소, 속성 밖으로 빠져나가려는 따옴표가 모두 무해하게 나와야 합니다. DOMPurify는 브라우저가 필요해서 자동 테스트에 포함되지 않는 유일한 단계입니다.

출처

자주 묻는 질문

어떤 마크다운을 지원하나요?
CommonMark에 GitHub 확장을 더한 것입니다. 표, 체크리스트(- [x]), 취소선(~~글~~), 코드 블록, 자동 링크를 지원합니다. README, 메모, 대부분의 블로그 글에 충분합니다.
마크다운 안에 HTML을 넣을 수 있나요?
글자로 표시될 뿐 실행되지 않습니다. 낯선 곳에서 붙여 넣은 내용이 이 페이지에서 아무것도 하지 못하게 하려는 것이고, 미리보기와 복사하는 HTML이 항상 입력한 내용과 일치하는 이유이기도 합니다.
어떤 링크와 그림이 허용되나요?
웹(http, https), 메일, 전화 주소, 같은 페이지 안의 위치(#section), 상대 경로 링크입니다. 그림은 웹 주소만 됩니다. javascript:나 data: 주소 같은 나머지는 제거됩니다.
다이어그램도 그릴 수 있나요?
네, 머메이드(Mermaid)로 그립니다. 언어가 mermaid인 코드 블록에 flowchart LR, sequenceDiagram, classDiagram, gantt, pie 같은 다이어그램 문법을 쓰면 미리보기에 그림이 나옵니다. 다이어그램에 오류가 있으면 그림 대신 머메이드의 오류 메시지가 나옵니다. 첫 다이어그램을 그릴 때 브라우저가 용량이 큰 머메이드 라이브러리를 내려받으므로 잠시 걸릴 수 있습니다.
내 페이지에 다이어그램을 넣으려면 어떻게 하나요?
HTML을 복사하세요. 다이어그램은 mermaid 클래스가 붙은 pre 요소로 들어 있는데, 이것이 머메이드가 읽는 형태라서 머메이드를 불러오는 페이지라면 그림으로 바뀝니다. .html 내려받기 버튼은 불러오는 스크립트를 대신 넣어 주며, 이 파일은 다이어그램을 그리려면 인터넷 연결이 필요합니다. GitHub도 마크다운 파일의 mermaid 코드 블록을 직접 그려 줍니다.
어떤 코드 언어에 색이 입혀지나요?
highlight.js 라이브러리가 아는 약 190개입니다. php, javascript(js), typescript(ts), python(py), bash(sh), sql, json, yaml, html, xml, css, java, kotlin, go, rust, c, cpp, csharp(cs), ruby, swift, dart, lua, powershell, dockerfile, diff, markdown(md), graphql, nginx 등이 있고, 색 없이 쓰는 text(plaintext, txt)도 있습니다. 별칭까지 모두 적은 전체 목록이 편집기 아래에 있어서 검색할 수 있고, 언어를 누르면 코드 블록이 글에 들어갑니다.
목록에 없는 언어는 어떻게 되나요?
코드 블록은 그대로 남고 이름이 클래스로 붙으며 색 없이 표시됩니다. Vue, Svelte, Astro, Zig, Terraform처럼 비교적 새로운 이름은 목록에 없습니다. 복사한 HTML에는 이름이 남아서, 직접 구문 강조를 쓰는 사이트라면 거기서 색을 입힐 수 있습니다. 색은 미리보기에만 있고, 복사하는 HTML의 코드 블록에는 색이 없습니다.
입력한 글이 업로드되거나 저장되나요?
아니요. 브라우저에서 처리하며 페이지를 닫으면 사라집니다.
HTML에 스타일도 들어 있나요?
아니요. 일반 태그로만 된 HTML이라서 붙여 넣는 사이트의 모양을 따릅니다. 내려받은 파일도 스타일이 없는 기본 페이지입니다.
버전 기록
  • 1.2.1 — 검색 제목에서 도구의 핵심 작업과 무료·온라인 사용 여부를 더 분명하게 안내합니다.
  • 1.2.0 — highlight.js로 약 190개 언어의 코드에 색을 입히고, 검색할 수 있는 언어 목록을 보여 줍니다.
  • 1.1.0 — ```mermaid 코드 블록을 머메이드 다이어그램으로 그립니다.
  • 1.0.0 — 첫 공개.

마지막 업데이트: