Markdown Editor

Markdown Editor

왼쪽에서 Markdown 작성, 오른쪽에서 실시간 미리보기. 자주 쓰는 서식은 모두 툴바에. 완전히 클라이언트에서 실행되어 내용이 브라우저를 벗어나지 않습니다.

아니요. 모든 Markdown 파싱은 브라우저 내에서 marked 라이브러리로 이루어지며(출력은 XSS 방지를 위해 DOMPurify로 정화됩니다). 내용은 전송, 기록, 저장되지 않습니다.

CommonMark + GitHub Flavored Markdown (GFM): 표, 체크리스트 ([x], [ ]), 취소선 (~~), 자동 링크, 언어 태그가 붙은 펜스드 코드 블록 구문 강조.

편집기 0 단어 · 0 자
미리보기

왜 Markdown Editor인가?

깔끔하고 빠른 실시간 미리보기 — 흔히 쓰이는 Markdown 확장을 모두 내장.

실시간 미리보기

입력하는 즉시 HTML이 갱신되며, 코드 블록은 구문 강조되고 GitHub Flavored Markdown을 지원합니다.

분할 또는 전체 보기

분할 화면(편집기+미리보기), 편집기만, 미리보기만을 선택할 수 있습니다. 모바일에서는 자동으로 레이아웃이 조정됩니다.

개인정보 우선 설계

모든 Markdown 파싱은 브라우저 내에서 이루어지며, 내용은 서버로 전송되거나 저장되지 않습니다.

툴바 및 단축키

제목, 굵게, 기울임, 코드, 링크, 인용, 목록, 표, 체크박스를 원클릭으로. 단축키: Ctrl/⌘+B, I, K.

GitHub Flavored Markdown

표, 체크리스트, 취소선, 펜스드 코드 블록과 190개 이상 언어의 자동 감지 구문 강조를 지원합니다.

복사 및 다운로드

Markdown 원본이나 렌더링된 HTML을 클립보드에 복사하거나.md 파일로 다운로드하세요.

Markdown 에디터 작동 방식

왼쪽에서 편집하면 오른쪽에서 HTML이 즉시 — 로컬에서 — 보입니다.

  1. 1

    Markdown을 입력하거나 붙여넣으십시오

    왼쪽 창은 일반 textarea입니다. 기존 .md 파일을 붙여넣거나 새로 작성하십시오. 표준 키보드 단축키가 적용되며(⌘ B는 굵게, ⌘ I는 기울임꼴) 제목, 목록, 링크, 코드 블록, 표를 위한 툴바도 함께 제공합니다.

  2. 2

    Marked.js가 HTML로 렌더링합니다

    키를 누를 때마다 입력을 검증된 CommonMark + GitHub Flavoured Markdown 파서인 marked에 통과시킵니다. GFM 기능 — 작업 목록, 표, 취소선, 자동 링크 — 가 모두 작동합니다. 출력은 DOMPurify로 정제하여 임베드된 스크립트를 제거합니다.

  3. 3

    구문 강조 미리보기

    렌더링된 HTML의 코드 블록은 약 190개 언어에 대해 highlight.js로 강조됩니다. 미리보기 창은 에디터와 동기화하여 스크롤되므로 편집 중인 부분의 렌더링 결과를 바로 볼 수 있습니다.

  4. 4

    복사 또는 다운로드

    원본 Markdown, 렌더링된 HTML, 또는 단일 자체 포함 이미지(html-to-image를 통한 PNG)를 내보내십시오. 세 가지 출력 모두 브라우저에서 생성되며 — 초안 텍스트는 어떤 서버에도 닿지 않습니다.

사람들이 이것을 어디에 사용하는가

브라우저 전용 에디터가 빛을 발하는 실제 워크플로입니다.

README 파일 작성

에디터를 열고 프로젝트 설명을 붙여넣으면 푸시하기 전에 README가 GitHub에서 어떻게 렌더링될지 정확히 확인할 수 있습니다. 미리보기를 위해 커밋하고 되돌릴 필요가 없습니다.

블로그 포스트 작성

글을 쓰면서 실시간 미리보기를 활용해 잘못된 Markdown을 잡아내십시오 — 닫히지 않은 괄호, 잘못된 표 구조, 건너뛴 헤더 레벨 등을 확인할 수 있습니다. "발행, 깨진 화면 확인, 수정, 재발행"의 번거로움을 줄여 줍니다.

오프라인 메모 작성

페이지가 로드된 뒤에는 비행기 안이나 사내 방화벽 뒤에서도 에디터가 작동합니다. 초안은 브라우저 탭에 보관되므로, 페이지를 떠나기 전에 신중히 닫거나 내용을 복사해 두십시오.

Markdown을 깔끔한 HTML로 변환

장문의 Markdown 문서를 끌어다 놓고 렌더링된 HTML을 복사한 뒤 CMS에 붙여넣으십시오. 서식을 예측 불가능하게 떼어내는 CMS 기본 Markdown 임포터보다 깔끔한 결과를 얻을 수 있습니다.

초안에 프라이버시가 필요한 이유

초안에는 미가공 아이디어, 내부 제품명, 고객 피드백, NDA로 묶인 자료가 담기곤 합니다. 클라우드에 자동 저장되는 온라인 에디터는 모든 키 입력을 조용히 서버 로그로 바꿉니다. iKit의 Markdown 에디터에는 저장 엔드포인트조차 없으며 — 초안은 오직 브라우저 탭 안에서만 존재합니다.

  • 서버 자동 저장도, 저희 측 초안 기록도 없습니다.
  • 키 입력마다 로컬에서 렌더링됩니다 — 디바운스된 API 호출이 없습니다.
  • 이미지 임베드는 붙여넣은 Data URI나 외부 URL 그대로 유지됩니다 — 저희가 프록시하지 않습니다.

관련 가이드

iKit 블로그의 심층 튜토리얼과 도구 비교.

자주 묻는 질문

내 콘텐츠가 서버로 전송되나요?

아니요. 모든 Markdown 파싱은 브라우저 내에서 marked 라이브러리로 이루어지며(출력은 XSS 방지를 위해 DOMPurify로 정화됩니다). 내용은 전송, 기록, 저장되지 않습니다.

어떤 Markdown 방언을 지원하나요?

CommonMark + GitHub Flavored Markdown (GFM): 표, 체크리스트 ([x], [ ]), 취소선 (~~), 자동 링크, 언어 태그가 붙은 펜스드 코드 블록 구문 강조.

파일이 저장되나요?

아니요. 이 도구는 자동 저장하지 않습니다. 다운로드 버튼으로 문서를.md 파일로 저장하세요. 서버에는 아무것도 저장되지 않으므로 페이지를 새로고침하면 내용이 사라집니다.

어떤 키보드 단축키가 있나요?

Ctrl/⌘+B 굵게, Ctrl/⌘+I 기울임, Ctrl/⌘+K 링크. Tab은 공백 4개 삽입(또는 선택된 줄 들여쓰기), Shift+Tab은 내어쓰기.

이미지를 붙여넣거나 드롭할 수 있나요?

현재는 툴바를 통해 이미지 구문(![alt](url))을 삽입할 수 있습니다. 이미지를 어딘가에 저장해야 하므로 개인정보 우선 설계에 맞지 않아 직접 붙여넣기/드롭은 지원하지 않습니다.