개발자

마크다운 → HTML 변환

마크다운을 HTML 코드와 미리보기로 변환

입력한 텍스트는 브라우저에서만 처리되며 서버로 전송·저장되지 않습니다.Your text is processed entirely in your browser — never uploaded or stored.

마크다운 변환기란?

마크다운 변환기#, **, - 같은 간단한 기호로 작성한 마크다운 텍스트를 실시간으로 HTML로 변환하고 미리보기를 보여주는 도구입니다. README 작성, 블로그 초안, 게시글 미리보기 등에 유용합니다.

지원 문법
  • 제목: # ~ ######
  • 굵게 **text** / 기울임 *text*
  • 인라인 코드 `code` / 코드 블록 ```
  • 링크 [text](url) / 이미지 ![alt](url)
  • 순서 있는/없는 목록, 인용문 >, 수평선 ---
참고: 표·각주 등 확장 문법은 지원하지 않으며, 기본적인 GitHub Flavored Markdown 요소 위주로 지원합니다.
안전한 변환(XSS 방지)

입력 텍스트는 먼저 HTML 특수문자를 이스케이프한 뒤 마크다운 서식을 적용하므로 <script> 같은 태그를 입력해도 실행되지 않고 문자 그대로 표시됩니다. 모든 변환은 브라우저 안에서만 이루어지며 서버로 전송되지 않습니다.

마크다운의 철학과 CommonMark 표준화

마크다운은 2004년 존 그루버(John Gruber)가 "글쓴이가 서식 기호를 최소화해도 원문 자체가 읽기 쉬워야 한다"는 철학으로 만든 경량 문법입니다. HTML 태그 대신 #·*·- 같은 익숙한 기호를 쓰기 때문에 변환 전 원문도 이미 문서처럼 읽힙니다. 다만 초기 마크다운은 명세가 느슨해 도구마다 세부 동작(줄바꿈·중첩 목록·강조 처리 등)이 조금씩 달랐고, 이 문제를 해결하기 위해 2014년 CommonMark 프로젝트가 여러 구현체 비교 테스트(Babelmark)를 거쳐 엄격한 표준 명세를 정리했습니다. GitHub·GitLab 등 대부분의 현대 플랫폼은 CommonMark를 기반으로 한 확장 문법(GitHub Flavored Markdown 등)을 씁니다.

자주 틀리는 문법 3가지 (이 도구 기준 실례)
  • ① 줄바꿈: CommonMark 표준은 문단 안에서 줄 끝에 공백 두 칸(또는 백슬래시)을 남겨야 <br>로 줄바꿈됩니다. 이 도구는 더 단순하게 동작해, 빈 줄로 나누지 않은 각 줄도 전부 별도의 <p> 문단으로 렌더링합니다.
  • ② 단어 중간의 *: 5*3=15 그리고 *중요*처럼 곱셈 기호로 *를 쓰면 첫 *부터 다음 *까지 통째로 기울임으로 묶여 5<em>3=15 그리고 </em>중요*처럼 의도치 않은 서식이 생깁니다. 강조 목적이 아닌 *는 다른 기호로 바꾸는 것이 안전합니다.
  • ③ 중첩 목록 미지원: 표준 마크다운은 들여쓰기로 하위 목록을 중첩할 수 있지만, 이 도구는 -·*·숫자. 줄을 들여쓰기와 무관하게 항상 한 단계짜리 평면 목록으로만 처리합니다.
What is this tool?

The Markdown converter turns Markdown syntax written with symbols like #, **, and - into HTML in real time with a live preview — handy for drafting READMEs, blog posts, and previewing posts.

Supported syntax
  • Headings: # through ######
  • Bold **text** / Italic *text*
  • Inline code `code` / code blocks ```
  • Links [text](url) / images ![alt](url)
  • Ordered/unordered lists, blockquotes >, horizontal rules ---
Note: Extended syntax like tables and footnotes are not supported — this covers the basics of GitHub Flavored Markdown.
Safe conversion (XSS prevention)

Input text is HTML-escaped before formatting rules are applied, so tags like <script> are never executed and are shown as literal text. Everything runs in your browser and is never sent to a server.

Markdown's philosophy and CommonMark standardization

Markdown was created in 2004 by John Gruber with the philosophy that "the raw source itself should be readable, even without heavy formatting symbols." It borrows familiar symbols like #, *, and - instead of HTML tags, so the raw text already reads like a document before any conversion. Early Markdown's spec was loose, though, so different tools handled details like line breaks, nested lists, and emphasis slightly differently. To fix this, the CommonMark project standardized a strict spec in 2014 by cross-testing many implementations (Babelmark). Most modern platforms — GitHub, GitLab, and others — build their extended syntax (GitHub Flavored Markdown, etc.) on top of CommonMark.

3 common syntax mistakes (verified against this tool)
  • 1. Line breaks: CommonMark requires two trailing spaces (or a backslash) at the end of a line within a paragraph to insert a <br>. This tool works more simply — every line not separated by a blank line still renders as its own separate <p> paragraph.
  • 2. A mid-word *: Writing 5*3=15 and *important* using * as a multiplication sign wraps everything from the first * to the next one in emphasis, producing 5<em>3=15 and </em>important* — unintended formatting. Use a different symbol for * when you don't mean emphasis.
  • 3. No nested lists: Standard Markdown lets you nest sub-lists via indentation, but this tool treats every -, *, or 1. line as a single flat list regardless of indentation.
마크다운(Markdown)이란 무엇인가요?
마크다운은 `#`, `*`, `-` 같은 간단한 기호로 제목·굵게·목록 등의 서식을 표현하는 경량 문서 작성 문법입니다. GitHub README, 블로그, 메모 앱 등에서 널리 쓰이며, 일반 텍스트처럼 읽기 쉬우면서도 HTML로 손쉽게 변환할 수 있습니다.
어떤 마크다운 문법을 지원하나요?
제목(# ~ ######), 굵게(**text**), 기울임(*text*), 인라인 코드(`code`), 코드 블록(```), 링크([text](url)), 이미지(![alt](url)), 순서 있는/없는 목록, 인용문(>), 수평선(---), 문단을 지원합니다.
변환된 HTML이 안전한가요? (XSS 방지)
네. 입력한 텍스트는 먼저 HTML 특수문자를 이스케이프한 뒤 마크다운 서식을 적용하므로 <script> 같은 태그를 입력해도 실행되지 않고 문자 그대로 표시됩니다. 링크의 javascript: 스킴도 차단해 미리보기 화면에서 스크립트가 실행되지 않도록 합니다.
GitHub README 작성에 사용할 수 있나요?
네. 기본적인 GitHub Flavored Markdown 문법(제목·목록·코드블록·링크·이미지 등)을 지원하므로 README.md 초안을 작성하고 결과를 미리 확인하는 용도로 유용합니다. 표·각주 등 고급 확장 문법은 지원하지 않습니다.
입력한 내용이 서버로 전송되나요?
아니요. 모든 변환과 미리보기는 사용자의 브라우저 안에서만 이루어지며, 입력한 마크다운 텍스트는 서버로 전송되거나 저장되지 않습니다.
마크다운은 왜 이런 기호 방식으로 설계되었나요?
2004년 존 그루버가 '글쓴이가 서식 기호를 최소화해도 원문 자체가 읽기 쉬워야 한다'는 철학으로 만들었습니다. HTML 태그 대신 #·*·- 같은 익숙한 기호를 쓰기 때문에 변환 전 원문도 이미 문서처럼 읽힙니다.
CommonMark는 무엇이고 왜 필요했나요?
초기 마크다운은 명세가 느슨해 도구마다 줄바꿈·중첩 목록·강조 처리 같은 세부 동작이 조금씩 달랐습니다. 2014년 CommonMark 프로젝트가 여러 구현체를 비교 테스트해 엄격한 표준 명세를 정리했고, GitHub 등 대부분의 플랫폼이 이를 기반으로 합니다.
이 도구에서 자주 틀리는 마크다운 문법은 무엇인가요?
① 줄 끝 공백 두 칸으로 줄바꿈하는 표준 규칙이 이 도구엔 없어 각 줄이 전부 별도 문단이 됩니다. ② '5*3=15 그리고 *중요*'처럼 곱셈에 *를 쓰면 첫 *부터 다음 *까지 통째로 기울임 처리됩니다. ③ 이 도구는 들여쓰기 기반의 중첩 목록을 지원하지 않고 항상 평면 목록으로 렌더링합니다.
What is Markdown?
Markdown is a lightweight writing syntax that uses simple symbols like `#`, `*`, and `-` to express headings, bold text, lists, and more. It is widely used for GitHub READMEs, blogs, and note apps — easy to read as plain text and easy to convert to HTML.
Which Markdown syntax is supported?
Headings (# through ######), bold (**text**), italics (*text*), inline code (`code`), code blocks (```), links ([text](url)), images (![alt](url)), ordered/unordered lists, blockquotes (>), horizontal rules (---), and paragraphs.
Is the generated HTML safe? (XSS prevention)
Yes. Your input is HTML-escaped before formatting rules are applied, so tags like <script> are never executed and appear as literal text. Link hrefs using the javascript: scheme are also blocked so the preview can never run a script.
Can I use this to write a GitHub README?
Yes. It supports the core GitHub Flavored Markdown syntax (headings, lists, code blocks, links, images), making it handy for drafting a README.md and previewing the result. Advanced extensions such as tables and footnotes are not supported.
Is my text sent to a server?
No. All conversion and preview rendering happen entirely in your browser; your Markdown text is never uploaded or stored.
Why was Markdown designed around plain symbols?
John Gruber created it in 2004 with the philosophy that the raw source itself should stay readable even with minimal formatting symbols. It uses familiar characters like #, *, and - instead of HTML tags, so the raw text already reads like a document.
What is CommonMark and why was it needed?
Early Markdown's loose spec meant different tools handled details like line breaks, nested lists, and emphasis slightly differently. The CommonMark project standardized a strict spec in 2014 by cross-testing many implementations, and most platforms like GitHub build on it today.
What Markdown syntax mistakes are common with this tool?
1) This tool has no "two trailing spaces = line break" rule — every line becomes its own paragraph. 2) Writing 5*3=15 and *important* wraps everything between the first and next * in emphasis. 3) This tool doesn't support indentation-based nested lists — it always renders a flat list.