도구
가이드

Markdown 미리보기

개발

자체 포함 살균 렌더러로 Markdown을 HTML로 렌더링 — 원시 HTML은 실행되지 않고 출력은 CSP 안전합니다.

100% 클라이언트 백엔드 없음
Markdown
출력
이 페이지에서

Markdown 렌더러란?#

Markdown은 개발자가 서식 있는 텍스트를 쓰기 위해 사용하는 일반 텍스트 약어입니다. **bold**, # headings, - lists, `code`. 렌더러는 그 약어 표시를 브라우저가 실제로 표시하는 HTML로 바꾸는 프로그램입니다. README 파일, 문서 사이트, 이슈 트래커 댓글, 채팅 앱, 정적 사이트 생성기는 모두 Markdown을 보여 주기 전에 렌더러를 통해 통과시킵니다.

이 페이지는 하나의 특정한 설계 우선순위를 가진 Markdown 렌더러입니다. 필터링이 아니라 구조에 의해 안전합니다. 대부분의 렌더러는 먼저 Markdown을 HTML로 바꾼 뒤 결과에서 위험한 태그를 스크럽하려 합니다. 하나의 빠진 정규식이 XSS 취약점을 의미하는 모델입니다. 이 도구는 반대로 동작합니다. 소스의 모든 문자는 어떤 포맷팅이 적용되기 전에 HTML 이스케이프되며, 내보내는 유일한 태그는 고정된 하드코드된 허용 목록(p, h1–h6, ul, ol, li, blockquote, pre, code, hr, a, img, strong, em, del, br)에서 옵니다. 입력에서 <script> 태그를 내보낼 수 있는 코드 경로가 없습니다. 소스의 날것 <는 포매터가 보기도 전에 &lt;로 이스케이프되기 때문입니다. 그것이 이 사이트 같은 엄격한 CSP 정적 사이트에 적합하게 만드는 점입니다.

CommonMark의 집중된 부분 집합 더하기 GitHub-Flavored Markdown 필수를 구현합니다. 울타리 코드 블록, ATX 제목, 단락, 순서·무순서 목록, 인용 블록, 테마 구분선(---), 인라인 코드, 굵게, 이탤릭, 취소선, 이미지, 링크, 각도 자동 링크. 같은 입력이 두 출력을 나란히 줍니다. 미리보기 와 날것의 HTML — 렌더러가 생성한 것을 정확히 볼 수 있습니다.

사용 방법#

  1. 왼쪽 창에 Markdown을 입력하거나, 예제 를 클릭해 지원 기능 모두를 시험하는 내장 문서를 불러옵니다.
  2. 오른쪽 창 위의 두 버튼으로 출력을 전환합니다.
    • 미리보기 는 웹 페이지에 나타나는 것처럼 포맷된 결과를 보여 줍니다.
    • HTML 은 렌더러가 내보낸 정확한 HTML을 보여 줍니다. 템플릿에 붙여넣거나 살균기 감사에 넘길 것입니다.
  3. HTML 복사 를 클릭해 생성된 HTML을 다른 곳에 쓰기 위해 가져옵니다. CMS에 붙여넣기, 템플릿에 끼워 넣기, 또는 검토에 통과시키기.
  4. 지우기 로 두 창을 비웁니다.
  5. 상태 줄은 렌더링된 바이트 길이를 보고하거나 입력이 비어 있을 때 알려 줍니다.

주요 기능#

  • 구조에 의한 안전. 모든 소스 텍스트는 포맷팅 전에 HTML 이스케이프되며, 렌더러는 고정된 허용 목록의 태그만 내보냅니다. 잘못될 수 있는 “위험한 부분을 그 다음 벗겨내는” 단계가 없습니다.
  • 위험한 URL 스킴 폐기. 링크와 이미지 URL은 스킴 점검을 받습니다. javascript:, vbscript:, data:, file:, about:은 차단되고 해당 텍스트는 라이브 링크가 되는 대신 문자 그대로 표시됩니다.
  • 하나의 소스, 두 보기. 다시 치지 않고 렌더링된 미리보기와 날것의 HTML 사이를 전환합니다. 시각적 결과와 그것이 만든 마크업 모두를 검증할 수 있습니다.
  • GFM 필수 포함. 취소선(~~text~~), 언어 힌트가 있는 울타리 코드 블록, 작업 친화적 목록이 GitHub 맛 Markdown처럼 동작합니다.
  • 종속성 없음, 100% 클라이언트 사이드. 렌더러는 자체 구현입니다. 번들된 파싱 라이브러리가 없으며 전적으로 브라우저에서 동작합니다. 업로드되는 것은 없고, 무엇이든 주입할 백엔드가 없습니다.

사용 예#

예제 를 클릭하면 왼쪽 창이 핵심 문법을 시험하는 문서로 채워집니다.

# Heading

A paragraph with **bold**, *italic*, ~~strike~~ and `inline code`.

- bullet one
- bullet two

1. first
2. second

> A blockquote.

[a link](https://example.com)

\`\`\`
const x = 42;
console.log(x);
\`\`\`

HTML 로 전환하면 렌더러가 내보낸 것을 정확히 봅니다. 단락은 다음이 됩니다.

<p>A paragraph with <strong>bold</strong>, <em>italic</em>,
<del>strike</del> and <code>inline code</code>.</p>

링크는 안전한 rel/속성을 가진 하드 타깃이 됩니다.

<a href="https://example.com" rel="noopener noreferrer" target="_blank">a link</a>

그리고 울타리 블록은 소스를 문자 그대로 보존하는 이스케이프된 <pre><code>가 됩니다. const x = 42;는 실행된 스크립트가 아니라 텍스트로 나타납니다. 마지막 점이 전체 보안 이야기를 축소합니다. 소스에 <script>alert(1)</script>를 붙여넣더라도 리터럴 텍스트 <script>alert(1)</script>로 렌더링됩니다. <가 포매터가 태그인지 결정하기도 전에 &lt;로 이스케이프되기 때문입니다.

FAQ#

그냥 HTML을 직접 쓰는 대신 왜 이것을 쓰나요?#

Markdown이 타이핑이 빠르고, 소스 형태에서 읽기 쉬우며, HTML에 능숙하지 않은 기여자가 콘텐츠를 쓰게 해 주기 때문입니다. 이 렌더러는 일반 파싱 라이브러리가 또한 안전하길 신뢰하지 않고 그 편의를 원할 때를 위한 것입니다. 여기서의 안전은 끝에 붙인 살균기가 아니라 아키텍처에서 옵니다.

<script> 태그를 붙여넣었는데 텍스트로 나타났습니다. 버그인가요?#

아닙니다. 그것은 의도된 동작이자 핵심 안전 보장입니다. 입력의 모든 문자는 포맷팅 전에 HTML 이스케이프되어, 소스의 태그 같은 텍스트는 무활성 가시 텍스트로 렌더링됩니다. 이 렌더러를 통해 라이브 <script>를 출력으로 가져올 방법은 없습니다.

왜 내 javascript: 링크가 일반 텍스트로 표시되나요?#

렌더러가 모든 링크와 이미지 URL의 스킴을 점검하기 때문입니다. javascript:, vbscript:, data:, file:, about: 같은 스킴은 주입 공격의 고전적 벡터이므로 차단됩니다. URL이 차단되면 렌더러는 위험한 앵커를 내보내는 대신 원래 Markdown 소스를 리터럴 텍스트로 남깁니다.

표, 작업 목록, 각주를 지원하나요?#

아닙니다. 이것은 CommonMark 더하기 GFM 필수(울타리 코드, 취소선, 자동 링크)의 의도적이고 집중된 부분 집합입니다. 표와 각주는 더 풍부한 파서와 더 큰 공격 표면을 경찰할 필요가 있어 의도적으로 범위 밖입니다. 위 기능에 나열된 지원 구조에 머무르세요.