텍스트

Markdown Preview / HTML ↔ Markdown

Markdown을 포맷된 HTML로 실시간 미리보기하고, Markdown → HTML, HTML → Markdown 양방향 변환도 지원합니다.

Markdown is a lightweight markup language that formats text with plain characters (**bold**, # heading, - list) and stays readable even unrendered. This tool gives you a live preview of Markdown as HTML and converts in both directions.

How to use it

Common uses

Things to keep in mind

Different platforms (GitHub, GitLab, Discord) support slightly different Markdown extensions (tables, strikethrough, checkboxes) — the base syntax is the same everywhere.

Converting HTML to Markdown loses whatever Markdown can't express: complex layout, inline styles, deeply nested elements.

이 도구에 대한 아티클: Markdown: 문서화의 표준이 된 이유

자주 묻는 질문

어떤 변환을 제공하나요?

세 가지 모드가 있습니다: 서식 있는 HTML로 렌더링되는 Markdown 실시간 미리보기, 명시적인 Markdown → HTML 변환, 그리고 반대로 HTML → Markdown 변환입니다.

어떤 Markdown 렌더링 엔진을 사용하나요?

이것은 JavaScript로 만든 간단한 클라이언트 측 Markdown 렌더링이며, Blade나 Twig 같은 특정 서버 측 템플릿 엔진과는 관련이 없습니다. 결과는 프레임워크 특유의 문법이 아닌 표준 Markdown을 반영합니다.

제 Markdown이나 HTML 콘텐츠가 서버로 전송되나요?

아니요, 변환과 미리보기는 브라우저에서 완전히 실행되며 온라인으로 전송되는 콘텐츠는 없습니다.

같은 파일이 앱마다 다르게 보이는 이유는 무엇인가요?

원래 Markdown에는 표, 취소선, 코드 블록의 문법 강조가 정의되어 있지 않습니다 — 이들은 여러 구현체가 추가한 확장입니다. GitHub Flavored Markdown과 CommonMark 명세는 일부 모호한 경우를 서로 다르게 처리하므로, 같은 파일의 렌더링 결과가 파서에 따라 달라질 수 있습니다.

복잡한 HTML을 Markdown으로 변환할 때 무엇이 손실되나요?

HTML은 기본 Markdown보다 훨씬 많은 서식 옵션을 지원하므로, 복잡한 표나 중첩된 스타일, 비표준 마크업은 역변환 시 단순화되거나 손실될 수 있습니다.

아티클: 텍스트

camelCase, snake_case, kebab-case: 언제 어떤 스타일을 쓸까

camelCase, snake_case, kebab-case가 왜 존재하며, 각각 보통 어디에 쓰이는지.

Text Diff: 텍스트 차이를 찾는 알고리즘의 작동 원리

diff 알고리즘이 텍스트 두 버전 사이의 최소 변경 집합을 찾는 방법.

정규 표현식: 기초와 탐욕적 매칭의 함정

정규 표현식에서 탐욕적 매칭과 게으른 매칭의 차이, 그리고 실무에서 왜 중요한지.

줄 정렬: 알파벳순과 숫자순은 왜 다를까

알파벳순 정렬이 숫자를 텍스트처럼 다루는 이유와, 숫자 정렬과의 차이.

문자열 이스케이핑: JS, JSON, 셸, 정규식마다 규칙이 다른 이유

모든 곳에 통하는 단 하나의 이스케이핑 규칙이 없는 이유 — JS, JSON, 셸, 정규식 각각 고유한 규칙이 있다.

CRLF와 LF: 줄바꿈 문자가 여전히 문제를 일으키는 이유

CRLF와 LF 차이가 어디서 왔는지, git과 스크립트에서 왜 지금도 문제를 일으키는지.

문자 수와 단어 수 세기: 유니코드가 왜 이것을 복잡하게 만드는가

유니코드에서 시각적으로 하나의 이모지가 여러 코드 포인트로 이루어질 수 있는 이유.

Lorem Ipsum: 이 더미 텍스트는 어디서 왔고 왜 의미가 없을까

Lorem Ipsum 텍스트가 실제로 어디서 왔는지, 실제 텍스트 대신 무의미한 텍스트를 쓰는 이유.

Slugify: 제목이 유효한 URL로 바뀌는 과정

기사 제목이 하이픈으로 구분된 깔끔하고 읽기 쉬운 URL로 바뀌는 과정.

보이지 않는 공백: 겉보기에 같은 텍스트 비교가 왜 실패할까

보이지 않는 공백 하나가 겉보기에 같은 두 텍스트의 비교를 실패하게 만드는 방법.

텍스트 뒤집기: 이모지에서 왜 깨질까

단순한 텍스트 뒤집기가 여러 코드 포인트로 이루어진 이모지를 왜 깨뜨리는지.

텍스트 빈도 분석: 워드 클라우드부터 암호 해독까지

문자 빈도 분석이 역사적으로 단순 치환 암호를 해독하는 데 어떻게 도움이 되었는지.