마크다운 미리보기 페이지 설명

마크다운은 문법이 단순해서 익숙해지면 빠르게 쓸 수 있지만, 표나 코드 블록처럼 조금 복잡한 문법은 실제로 어떻게 그려질지 확인하면서 쓰는 편이 안전합니다. 이 페이지는 화면을 좌우로 나눠 왼쪽에 마크다운을 입력하면 오른쪽에 렌더 결과가 곧바로 나타나도록 만들었습니다. 저장 버튼도, 미리보기 버튼도 따로 없이 타이핑하는 대로 반영돼요.

렌더링은 널리 쓰이는 marked 라이브러리가 담당하며 GFM(GitHub Flavored Markdown) 모드로 동작합니다. 그래서 파이프로 그리는 표, 백틱 세 개로 감싼 코드 블록, 취소선 같은 확장 문법이 깃허브에서 보던 것과 비슷하게 나옵니다. 여기에 줄바꿈을 그대로 반영하는 옵션이 켜져 있어서, 엔터를 한 번만 눌러도 새 줄로 넘어갑니다. 표준 마크다운에서는 줄 끝에 공백 두 칸을 넣어야 줄이 바뀌는데 그 번거로움을 없앤 설정이에요.

버튼은 세 개입니다. HTML 복사는 오른쪽 미리보기가 실제로 사용하는 HTML 소스를 그대로 클립보드에 담아 줍니다. 워드프레스 같은 곳에 HTML로 붙여넣어야 할 때 쓰면 편해요. 마크다운 복사는 왼쪽 원문을 복사하고, 지우기는 양쪽을 함께 비웁니다. 입력한 글은 서버로 올라가지 않고 브라우저 안에서만 처리되므로 초안이나 사내 문서를 확인하는 데도 무리가 없습니다.

사용 방법

1. 왼쪽 입력칸에 마크다운을 쓰거나 붙여넣습니다.
2. 오른쪽에서 제목·목록·표·코드 블록이 어떻게 그려지는지 확인합니다.
3. 결과를 다른 곳에 옮기려면 HTML 복사를, 원문을 옮기려면 마크다운 복사를 누릅니다.
4. 새로 시작하려면 지우기를 누릅니다.