Markdown → HTML 변환

CommonMark와 GitHub Flavored Markdown(GFM)을 사용해 Markdown을 HTML로 변환합니다. 문단 안의 줄바꿈은 <br> 태그로 렌더링돼요. 렌더링된 결과를 바로 볼 수도 있고, HTML 소스 보기로 바꿔 생성된 태그를 그대로 확인할 수도 있어요. 결과물은 블로그 플랫폼, 이메일 편집기, 그 밖에 HTML을 받는 어디에든 바로 붙여 넣어 쓸 수 있습니다.

예시

입력 Markdown:

# Release notes

We shipped **three** things this week:

- [x] Faster cold start
- [ ] Dark mode (next week)

See the [docs](https://example.com/docs) for details.

```js
console.log("hello");
```

렌더링된 HTML 소스:

<h1>Release notes</h1>
<p>We shipped <strong>three</strong> things this week:</p>
<ul>
<li><input type="checkbox" checked disabled> Faster cold start</li>
<li><input type="checkbox" disabled> Dark mode (next week)</li>
</ul>
<p>See the <a href="https://example.com/docs">docs</a> for details.</p>
<pre><code class="language-js">console.log("hello");
</code></pre>

자주 겪는 문제와 해결법

렌더링 결과가 예상과 다를 때는 대개 문법의 몇 가지 함정이 원인이에요. 미리보기가 이상하다면 아래 항목 중 하나를 먼저 확인해 보세요.

• 목록 앞에 빈 줄이 없어요. "소개 글\n- 항목" 처럼 붙여 쓰면 한 문단으로 렌더링됩니다. 소개 글과 첫 목록 항목 사이에 빈 줄을 넣어 주세요.
• 문단을 쓰려 했는데 코드 블록이 되는 경우. 줄 앞에 공백 4칸이 붙으면 해당 줄은 코드 블록으로 바뀝니다. 들여쓰기를 지우거나, 명시적으로 ``` 코드 펜스를 사용하세요.
• 표가 깨져 보여요. GFM 표에는 구분 행(| --- | --- |)이 필요하고, 각 열마다 대시(-)가 최소 세 개 있어야 하며, 모든 행의 파이프(|) 개수가 같아야 합니다.
• URL에 공백이 들어간 링크. [링크](my page.html) 처럼 URL에 공백이 있으면 파서가 해석하지 못해요. 공백을 %20으로 인코딩하거나, 꺾쇠괄호로 감싸 <my page.html> 형태로 쓰세요.
• 단어 안에 별표(*)가 있는 경우. wild*card 같은 표현은 앞뒤 문맥에 따라 강조로 렌더링될 수도, 그대로 남을 수도 있어요. 역슬래시로 이스케이프하세요: wild\*card.
• 코드 블록 안의 HTML 이스케이프. &lt; 가 들어간 스니펫을 그대로 붙여 넣으면, 이미 이스케이프된 상태라 화면에도 그 문자 그대로 보입니다. 이스케이프되기 전의 원본 소스를 붙여 주세요.

어떤 종류의 Markdown 문법을 지원하나요?

CommonMark와 GitHub Flavored Markdown(GFM)을 지원합니다. 표, 펜스 코드 블록, 체크리스트, 취소선, 자동 링크 등이 포함돼요. 문단 안의 줄바꿈은 <br> 태그로 렌더링되는데, 이는 GitHub 댓글이나 대부분의 채팅 앱과 동일한 방식입니다.

제 Markdown 안의 HTML은 자동으로 정제(sanitize)되나요?

아니요. 렌더링 미리보기는 원본 HTML을 그대로 통과시킵니다. 그래야 <details> 나 <kbd> 같은 임베드가 제대로 동작해요. 신뢰할 수 없는 Markdown을 그대로 복사해 공개 사이트에 붙여 넣지 마세요 — 먼저 DOMPurify 같은 새니타이저를 거치는 게 좋습니다.

각주나 수식, 다이어그램도 지원하나요?

아니요. 이 도구는 순수한 GFM만 지원합니다. 각주, 수식(KaTeX/MathJax), Mermaid 다이어그램은 GitHub나 특정 플랫폼의 확장이라 여기서는 렌더링되지 않아요. 필요하시면 해당 플러그인이 설정된 Markdown 렌더러를 쓰시거나, 해당 기능을 지원하는 플랫폼에 결과를 붙여 넣으세요.

"HTML 복사"를 누르면 어떤 일이 일어나나요?

Clipboard API를 통해 렌더링된 HTML 소스가 클립보드에 복사됩니다. 페이지의 다른 요소 없이, Markdown에 해당하는 태그만 복사돼요. CMS, 이메일 편집기, 혹은 직접 파일에 붙여 넣어 사용할 수 있습니다. 디스크에 파일은 생성되지 않습니다.

표가 왜 정렬이 맞지 않을까요?

GFM 표는 헤더 행, 열마다 대시(-) 세 개 이상이 들어간 구분 행, 그리고 셀 사이의 파이프(|)가 필요합니다. 파이프가 빠져 있거나 구분 행에 대시가 두 개뿐이면 조용히 실패합니다. HTML 소스 보기로 전환해서 실제로 <table> 태그가 만들어졌는지 확인해 보세요.

여기 붙여 넣은 Markdown을 저장하나요?

아니요. 입력하거나 붙여 넣으신 Markdown도, 내려받으신 HTML도 저희 쪽에 저장되지 않습니다. 탭을 닫거나 새로고침하는 즉시 모두 사라져요 — 로그도, 무엇을 쓰셨는지에 대한 기록도 남지 않습니다. 브라우저 개발자 도구에서 직접 확인해 보셔도 됩니다.