GitHub와 완전히 같은 결과를 기대하기
익숙한 Markdown 확장을 다수 지원하지만 GitHub의 파서를 사용하는 것은 아닙니다. 멘션, 이슈 참조, 이모지 단축어, 제목 ID와 일부 경계 사례는 다르게 렌더링될 수 있습니다.
Markdown 미리보기 | 정제 HTML 변환기
포맷팅브라우저에서 실행(업로드 없음)
Markdown을 브라우저에서 미리 보고 정제된 HTML로 변환합니다. 문서 내용을 서버에 올리지 않고 표, 작업 목록, 코드 하이라이트, KaTeX 수식, 각주, 정의 목록, 제한된 HTML을 확인할 수 있습니다.
다음에 할 작업
관련 작업 흐름을 이어가거나 이 작업 다음에 자주 사용하는 도구를 열어보세요.
작업 가이드
CSS 색상을 변환하고 글자 대비 검증하기
색상 변환기로 검토 가능한 sRGB 값을 만들되 최종 판단은 실제 문맥에서 내립니다. 원본 토큰을 보존하고, 투명도를 실제 바탕에 합성하고, 모든 상태를 검사하며, 프로파일 없는 CMYK 근사값을 인쇄 완성 파일과 구분합니다.
열기관련 도구텍스트·코드·Unified Patch Diff 비교기
정확한 줄 hunk, 코드 포인트 강조, unified patch로 제한된 텍스트를 로컬 비교합니다.
열기관련 도구마크업 변환 워크벤치 | CSS, JavaScript, JSX, Markdown, Pug
CSS 접두사 추가, CSS의 SCSS 형식 정리, JavaScript 구문 변환, HTML의 JSX·Markdown·Pug 변환을 로컬에서 수행합니다.
열기관련 도구텍스트 정리 워크벤치 | 목록, 로그, 문단 정리
한 작업공간에서 줄 번호, 필터, 정렬, 분할, 병합, 공백 정리, 줄바꿈을 순서대로 처리합니다.
열기이 도구 사용 방법
입력 편집기에 Markdown을 붙여넣거나 샘플 문서를 불러옵니다.
문서가 참조하는 모든 이미지 호스트를 신뢰하고 요청을 보낼 의도가 있을 때만 원격 이미지를 허용합니다.
짧은 편집에는 실시간 모드를, 큰 문서에는 수동 모드를 사용합니다.
표, 작업 목록, 코드, 수식, 원시 HTML을 중심으로 렌더링 미리보기와 HTML 출력을 비교합니다.
내보내기 전에 원격 이미지 차단, 크기, 변환 경고를 검토합니다.
정제된 HTML 조각을 복사하거나 내려받은 뒤 대상 환경의 CSS와 HTML 정책으로 다시 테스트합니다.
이 도구를 써야 할 때
README와 저장소 문서
README나 문서 변경을 커밋하기 전에 제목, 목록, 표, 코드 펜스와 상대 경로 이미지를 확인합니다.
코드와 수식이 있는 기술 글
원문을 브라우저에 둔 채 코드, 수식, 각주와 접기 영역이 포함된 기술 문서를 작성합니다.
Markdown에서 HTML로 전달
생성된 HTML 조각을 살펴보고 대상 서비스의 스타일이나 정책 검토가 필요한 요소를 찾습니다.
Markdown 문법 연습
렌더링 결과와 정제된 마크업을 함께 보면서 지원되는 Markdown 문법을 연습합니다.
흔한 실수
이미지 호스트를 확인하지 않고 원격 로드를 켜기
HTTP(S) 원격 이미지는 기본적으로 차단됩니다. 기능을 켜면 문서에 적힌 모든 이미지 호스트로 요청이 전송되어 IP 주소와 요청 정보가 노출될 수 있습니다.
정제된 HTML이면 어디에나 바로 게시해도 된다고 생각하기
이 도구는 위험한 태그, 이벤트 처리기, 실행 가능한 URL, 미디어와 폼을 제거하지만 CMS가 HTML을 다시 변환할 수 있습니다. 게시 대상의 HTML 정책도 확인해야 합니다.
HTML 조각에 사이트 디자인도 포함된다고 생각하기
복사되는 결과는 정제된 콘텐츠 마크업이며 웹사이트 테마가 아닙니다. 코드 색상, 표 간격, 글꼴과 KaTeX 표현에는 대상 환경의 CSS가 필요합니다.
큰 문서에서도 계속 실시간 모드를 사용하기
입력할 때마다 파싱과 문법 감지를 반복하면 편집이 느려질 수 있습니다. 큰 파일은 수동 모드를 사용하고 복잡한 수식이나 코드 구역은 필요에 따라 나누세요.
예시
릴리스 체크리스트와 표 확인
릴리스 노트를 저장소나 문서 시스템으로 옮기기 전에 제목, 작업 상태, 표 정렬, 각주가 의도대로 보이는지 확인합니다.
입력
# 릴리스 체크리스트
- [x] 테스트 실행
- [ ] 공지 게시
| 검사 | 결과 |
| --- | ---: |
| 접근성 | 통과 |
검토 기록을 확인하세요.[^1]
[^1]: 스테이징 빌드에서 검토했습니다.출력
<h1>릴리스 체크리스트</h1>
<ul class="contains-task-list">...</ul>
<table>...</table>
<section class="footnotes">...</section>코드와 수식 미리보기
코드 펜스에 언어를 지정해 하이라이트하고 KaTeX 구분자로 수식을 작성한 뒤 정제된 HTML 조각을 확인합니다.
입력
## 계산
```ts
const total = price * quantity;
```
$E = mc^2$출력
<h2>계산</h2>
<pre><code class="language-ts">...</code></pre>
<p><span class="katex">...</span></p>Markdown 렌더링과 HTML 정제 방식
markdown-it과 선택된 플러그인이 Markdown을 HTML로 파싱하며 작업 목록, 표, 각주, 정의 목록, 코드 하이라이트와 KaTeX 수식을 처리합니다.
GitHub 자체 렌더러가 아니라 호환성을 목표로 한 미리보기입니다. GitHub 전용 참조, 이모지 단축어, 자동 제목 ID와 경계 사례 결과는 다를 수 있습니다.
DOMPurify가 최종 신뢰 경계로 동작합니다. 실행 가능한 태그와 속성을 제거하고 링크를 제한하며 위험한 리소스와 스타일을 차단하고, 사용자가 허용하지 않은 원격 이미지를 제거합니다.
자주 묻는 질문
GitHub Flavored Markdown과 완전히 동일하게 렌더링하나요?
아닙니다. 표, 작업 목록, 취소선, 코드 펜스, 자동 링크 등 자주 쓰는 기능과 각주, 정의 목록, KaTeX를 지원하지만 GitHub와 동일한 출력이나 모든 GitHub 전용 확장을 보장하지 않습니다.
입력한 Markdown이 서버로 업로드되나요?
Markdown 파싱과 HTML 정제는 브라우저에서 수행되며 변환을 위해 문서 텍스트를 전송하지 않습니다. 상대 경로 이미지는 이 사이트의 경로를 요청할 수 있고, HTTP(S) 원격 이미지는 직접 허용하기 전까지 차단됩니다.
이미지와 링크는 어떻게 처리하나요?
안전한 링크는 noreferrer 보호와 함께 새 탭에서 열립니다. 상대 경로, blob, 안전한 래스터 data 이미지는 표시할 수 있습니다. HTTP(S) 원격 이미지는 기본값이 꺼진 설정을 켜야 하며 SVG data URL과 위험한 스킴은 제거됩니다.
Markdown 안에 HTML을 넣어도 되나요?
details, summary, 표, mark, 작업 목록 input 등 제한된 안전 태그는 남을 수 있습니다. 스크립트, KaTeX 외부 스타일, 이벤트 처리기, iframe, 삽입 미디어, 폼, 위험한 URL은 제거됩니다.
다운로드한 결과에는 무엇이 들어 있나요?
Markdown에서 만든 정제된 HTML 조각이 들어 있습니다. 웹사이트나 CMS에 사용하기 전에 대상 문서 구조와 CSS를 추가하고 그 서비스의 게시 정책을 다시 확인하세요.
이 도구를 검증한 방법
관리 및 검수 SimpleWebUtils검토일
검증 방법: 이번 검증은 “작업 목록, 표, 각주가 있는 릴리스 노트 검토”의 정확한 입력과 Markdown 미리보기를 짝지어 수행했습니다. “개인정보와 환경 전용 값을 먼저 제거합니다” 단계를 거쳐 “모양보다 문서 구조를 먼저 봅니다” 이후 결과를 캡처해 예시와 비교했습니다. 명시적인 경계 질문은 “호환성을 완전한 동일 렌더링 보증으로 표현하기”, “시각 미리보기만 확인하기”였습니다.
기대 결과: preview에는 h1 하나, 비활성 task box, 오른쪽 정렬 표 열과 연결된 footnote가 있었고, 최종 검사에서는 staging URL이 남지 않았음도 확인했습니다.
공식 출처와 표준
- CommonMark SpecificationCommonMark
관련 작업 가이드
도구를 열기 전에 자주 쓰는 작업 흐름과 예시를 확인하세요.
작업 가이드
CSS 색상을 변환하고 글자 대비 검증하기
색상 변환기로 검토 가능한 sRGB 값을 만들되 최종 판단은 실제 문맥에서 내립니다. 원본 토큰을 보존하고, 투명도를 실제 바탕에 합성하고, 모든 상태를 검사하며, 프로파일 없는 CMYK 근사값을 인쇄 완성 파일과 구분합니다.
작업 가이드데이터를 손상시키지 않고 CSV·JSON 레코드를 Markdown 표로 변환하기
문서 표는 원본 구조, 변환 규칙, 게시 결과가 일치할 때만 신뢰할 수 있습니다. 이 절차는 민감 정보를 제거한 대표 fixture에서 시작해 따옴표 CSV와 엄격한 JSON 객체 배열을 구분하고, 큰 숫자와 중첩 값을 보호하며, 생성 헤더와 빈 셀 보정을 모두 확인한 뒤 실제 게시 렌더러에서 완성된 GFM을 검증합니다.
작업 가이드README와 글을 게시하기 전에 Markdown을 안전하게 미리보기
Markdown 미리보기는 모든 게시 환경이 같은 결과를 만든다는 보증이 아니라 게시 전 검토 단계로 사용할 때 가장 유용합니다. 이 절차는 작업 문서를 브라우저에 둔 채 자주 쓰는 확장 문법과 정제된 HTML을 확인하고, 원격 이미지를 명시적인 개인정보 결정으로 다루며, 콘텐츠 마크업과 대상 환경의 스타일을 구분합니다. 마지막에는 내보낸 HTML 조각이나 원본 Markdown을 실제로 게시할 시스템에서 다시 테스트합니다.
작업 가이드HTML 본문을 GFM Markdown으로 옮기고 게시 전에 검증하는 방법
HTML을 Markdown으로 바꾸면 반복적인 문법 수정을 줄일 수 있지만, 게시 가능한 마이그레이션에는 본문 범위 분리, 신뢰 경계 검토, 자산 이전, 실제 대상 미리보기가 더 필요합니다. 이 절차는 하나의 본문이나 문서 섹션을 변환하고, 제거되거나 보존된 구조를 모두 확인하고, 위험한 링크와 상호작용 컨트롤을 교체하고, 이미지를 옮기고, 실제 게시 렌더러로 최종 파일을 검증합니다.
관련 도구
관리 중인 다른 작업 흐름을 이어서 사용해 보세요
텍스트·코드·Unified Patch Diff 비교기
정확한 줄 hunk, 코드 포인트 강조, unified patch로 제한된 텍스트를 로컬 비교합니다.
텍스트
마크업 변환 워크벤치 | CSS, JavaScript, JSX, Markdown, Pug
CSS 접두사 추가, CSS의 SCSS 형식 정리, JavaScript 구문 변환, HTML의 JSX·Markdown·Pug 변환을 로컬에서 수행합니다.
포맷팅
텍스트 정리 워크벤치 | 목록, 로그, 문단 정리
한 작업공간에서 줄 번호, 필터, 정렬, 분할, 병합, 공백 정리, 줄바꿈을 순서대로 처리합니다.
텍스트
단어 수 세기 | 확장 자소군·코드 포인트·UTF-8 바이트 비교
단어형 세그먼트, 확장 자소군, 코드 포인트, UTF-16 유닛, UTF-8 바이트, 줄과 읽기 시간을 로컬 계산합니다.
텍스트
제로 폭 문자를 안전하게 검사하고 제거하기
제로 폭 제어 문자 6종의 위치를 찾고 승인한 종류만 제거합니다.
텍스트