개발에 필요한, 작은 도구들.

Markdown 미리보기

작성 즉시 미리보고 HTML로 내보냅니다.

사용 가이드

입력은 이 브라우저에서 처리됩니다.

입력 · 옵션

텍스트 1MB

사용 예제 코드 보기 ↓

결과

입력 후 실행하면 결과가 표시됩니다.

사용 예제 코드

개발에 가져다 쓸 수 있는 기본 예제입니다. 표시된 환경에서 실행하세요.

Browser · ES module with a bundler (Vite)

현재 입력 반영은 코드에 사용된 항목에만 적용됩니다. 파일 입력은 예제에 포함하지 않습니다.

필요한 패키지 설치

npm install marked dompurify
import { marked } from "marked";
import DOMPurify from "dompurify";
const markdown = "# Hello tools\n\n**Markdown** preview.";
const html = DOMPurify.sanitize(marked.parse(markdown), {
  FORBID_TAGS: ["img", "iframe"],
});
const preview = document.createElement("article");
preview.innerHTML = html;
document.body.append(preview);

이렇게 사용하세요

작성 즉시 미리보고 HTML로 내보냅니다.

알아두면 좋은 점

형식과 의미

HTML은 정제합니다. 스크립트·외부 이미지·iframe은 미리보기에서 실행하거나 로드하지 않습니다.

지원 범위와 제한

텍스트 1MB

입력이 제한을 넘으면 데이터를 나누어 처리하세요. 파일 형식이나 알고리즘이 지원 범위에 없으면 다른 형식으로 임의 변환하지 말고 요구 사항에 맞는 도구를 선택하세요.