Softonic

Markdown 미리보기

단계 1 / 2
다음

왼쪽에 입력하면 오른쪽에서 HTML 렌더링 결과를 바로 확인할 수 있습니다. 이 미리보기는 GitHub 스타일 Markdown을 지원합니다. 표, 작업 목록, 구문 강조가 적용된 펜스 코드 블록, 취소선, 자동 링크된 URL, 인라인 HTML을 처리합니다. 커밋하기 전에 README 초안을 작성하거나, 풀 리퀘스트 댓글이 어떻게 표시될지 확인하거나, 키 입력마다 렌더링 결과를 보며 Markdown 문법을 익히는 데 유용합니다.

미리보기 사용 방법

  1. 1

    Markdown 작성

    왼쪽 창에 원본 Markdown을 입력합니다. 수정할 때마다 오른쪽 창이 즉시 다시 렌더링됩니다.

  2. 2

    HTML 미리보기 확인

    오른쪽 창에 GitHub 스타일이 적용된 렌더링 결과가 표시됩니다.

  3. 3

    표시 모드 전환

    나란히 보기, 미리보기 전용, 소스 전용 모드를 전환하여 방해 없이 집중해서 작성할 수 있습니다.

  4. 4

    HTML 복사

    렌더링된 HTML을 가져와 이메일 클라이언트나 CMS에 붙여 넣을 수 있습니다.

이 미리보기가 지원하는 기능

  • CommonMark: 제목, 문단, 강조, 목록, 인용문, 코드 블록, 링크, 이미지, 수평선.
  • GFM 확장: 열 정렬을 지원하는 표, 작업 목록(- [ ] 및 - [x]), ~~를 이용한 취소선, 자동 링크된 URL, 언어 힌트가 포함된 펜스 코드 블록.
  • 구문 강조: highlight.js를 통해 JavaScript, Python, Go, Rust, SQL, YAML 등 100개 이상의 언어를 지원합니다.
  • 원본 HTML: 인라인 HTML은 그대로 전달됩니다(안전을 위해 정제됩니다).
  • 수식(선택): 수식 확장을 활성화하면 $...$ 인라인과 $$...$$ 블록이 렌더링됩니다.

지원하지 않는 기능

  • Obsidian 스타일의 사용자 지정 위키 링크([[Page]]): Obsidian 전용입니다.
  • Pandoc 펜스 div(:::): Pandoc 전용입니다.
  • 서버 사이드 인클루드나 {% ... %} 템플릿 태그.

대표적인 활용

  • README 초안 작성: IDE 밖에서 작성한 뒤 최종본을 붙여 넣습니다.
  • PR 댓글 서식 확인: 게시하기 전에 확인합니다. GitHub 댓글 입력창은 코드 펜스를 제대로 미리 보여 주지 못합니다.
  • 메모를 HTML로 변환: 스타일이 적용된 콘텐츠를 이메일이나 원본 HTML을 지원하는 CMS에 붙여 넣어야 할 때 사용합니다.
  • Markdown 가르치기: 나란히 보기를 이용하면 문법 구조가 한눈에 들어옵니다.

성능

렌더링에는 GFM 플러그인이 적용된 Markdown-it 파서를 사용하며, 전적으로 브라우저 안에서 실행됩니다. 수백 KB 규모의 문서는 밀리초 단위로 렌더링되지만, 매우 큰 파일(책 한 권을 단일 파일에 담은 경우)은 입력 중에 끊길 수 있습니다. 그럴 때는 장 단위로 나누세요.

내보내기

  • HTML 복사를 누르면 렌더링된 내용과 스타일 클래스가 포함된 <div>를 얻을 수 있습니다.
  • .md 다운로드는 원본을 저장합니다.
  • 브라우저 인쇄 대화상자에서 PDF로 인쇄하면 렌더링된 화면을 스타일이 적용된 PDF로 출력합니다.

자주 묻는 질문

GitHub은 GFM 위에 자체 CSS를 적용합니다. HTML 출력은 동일해야 하며, 스타일(글꼴, 간격)은 GitHub의 것입니다. 완전히 동일하게 맞추려면 “GitHub에서 렌더링” 테마 옵션을 사용하세요.

예, 수식 확장을 활성화하면 인라인 $...$와 블록 $$...$$가 KaTeX로 렌더링됩니다. 페이지를 가볍게 유지하기 위해 기본적으로 꺼져 있습니다.

정제됩니다. <div>, <span>, <table>, <img> 같은 안전한 태그는 그대로 통과하고, <script>와 인라인 이벤트 핸들러는 제거됩니다.

수백 KB까지는 원활하게 동작합니다. 매우 큰 파일은 실시간 렌더링을 끄고 필요할 때만 렌더링하세요.

렌더링은 전적으로 클라이언트 측에서 이루어지며 내용은 어디에도 전송되지 않습니다. 페이지를 새로 고치면 브라우저가 폼 상태를 유지하지 않는 한 초안이 사라집니다.

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

HTML 문자 참조

HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.

키보드 단축키 참고표

macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

색상 틴트 생성기

기준 색의 밝은 틴트를 생성합니다. 디자인 시스템 토큰, 배경, 호버 상태를 위한 3-20단계 스케일.

이메일 검증기

이메일 주소를 검증합니다. RFC 5322 구문 검사, 실시간 MX 레코드 조회, 그리고 로컬 파트, 도메인, 길이 정보를 제공합니다. 이메일은 전송되지 않습니다.

이 도구는 다른 언어로도 제공됩니다