MARKDOWNPREVIEW

마크다운 포맷터 & 미리보기

마크다운 문서를 편집, 정렬하고 실시간 미리보기를 제공합니다.

INPUT (Markdown)

0 chars

OUTPUT

Markdown preview will render here...

도구 설명 및 사용 방법

마크다운 구문 서식을 정밀하게 정돈하고 교정하며, 실제 HTML 뷰어로 파싱된 렌더링 화면을 우측에 실시간 병렬 시각화하여 편집 디자인을 돕는 미리보기 도구입니다. 기술 문서 작성에 필수입니다.

사용 단계

좌측 편집 영역에 마크다운 문법의 초안 문서를 작성합니다.

도구 모음의 포맷 단추들을 활용하여 문단 공백과 번호 매기기 등의 서식을 깔끔하게 통일합니다.

우측 렌더링 창을 통해 타이틀, 굵기, 테이블, 코드 블록 등이 규격대로 시각화되는지 살핍니다.

교정이 끝난 최종 마크다운을 복사하거나 저장 파일로 전송해 문서에 활용합니다.

작동 원리 및 상세 설명

Markdown Formatter & Preview는 CommonMark 명세와 GitHub Flavored Markdown(GFM) 확장을 기반으로 동작합니다. 좌측 에디터의 텍스트를 파싱하여 일관된 공백, 리스트 마커, 코드 블록 펜스, 테이블 정렬 등을 정리하고, 우측에서는 remark/rehype 또는 동등한 파서를 통해 실시간 HTML로 렌더링하여 시각적 피드백을 제공합니다. 일관된 마크다운은 GitHub, GitLab, Docusaurus, VitePress, Notion 등 다양한 플랫폼에서 동일한 모양으로 표시되게 하며, 협업 시 diff 노이즈를 줄여줍니다. 특히 테이블, 체크리스트, 코드 블록이 많은 기술 문서에서 서식 통일의 가치가 매우 큽니다. 모든 파싱과 렌더링이 브라우저 로컬에서 수행되므로, 아직 공개되지 않은 제품 기획 문서, 내부 기술 설계서, 고객 제안서 초안 등을 안심하고 편집할 수 있습니다.

자주 묻는 질문 (FAQ)

GitHub Flavored Markdown(GFM) 테이블, task list 등이 지원되나요?

네. 우측 프리뷰는 GFM 확장(테이블, task list, 취소선, 자동 링크 등)을 포함하여 렌더링합니다. CommonMark 기본 스펙 + 주요 확장을 따라 실무 문서 작성 시 거의 동일한 결과를 얻을 수 있습니다.

포맷 후 원본 마크다운의 의도(의미)가 바뀌나요?

아닙니다. 공백 정리, 리스트 일관성, 코드 블록 펜스 정리 등은 렌더링 결과에 영향을 주지 않습니다. 다만 들여쓰기가 심하게 망가진 경우 수동 확인이 필요할 수 있습니다.

작성 중인 초안이 서버로 전송되나요?

전송되지 않습니다. 모든 편집, 포맷, HTML 렌더링은 브라우저에서만 이루어집니다. 비공개 설계 문서, 고객 제안서 초안도 안전하게 작업하세요.

코드 사용 예시

README 또는 기술 블로그 초안 정리 후 배포

javascript

// 1. 온라인에서 마크다운을 다듬고 우측 프리뷰 확인
// 2. 복사한 결과를 GitHub / Notion / Docusaurus에 붙여넣기

// 실제 프로젝트에서는 remark + rehype 파이프라인 사용
import { remark } from 'remark';
import html from 'remark-html';

const processed = await remark()
  .use(html)
  .process(markdownContent);

console.log(processed.toString()); // HTML output

도구로 초안을 다듬은 뒤, 실제 문서 사이트(Next.js + MDX, VitePress, Docusaurus) 빌드 파이프라인에 통합하는 일반적인 흐름입니다.