본문 바로가기

Markdown ↔ JSON AST 변환기

브라우저 처리

Markdown을 제목·목록·코드·인용 노드의 JSON 구조로 바꾸고, 그 JSON을 다시 Markdown으로 되돌립니다. 코드 언어와 체크박스 상태도 함께 오갑니다.

사용 전 확인
  • 파일·이미지·문서 처리 도구는 브라우저 안에서 처리되더라도 원본에 개인정보나 민감 정보가 포함될 수 있습니다. 공유·제출 전 원본과 결과를 한 번 더 확인하세요.
도구 실행입력 후 결과 확인
Markdown ↔ JSON AST 변환기 샘플 실행

문서를 프로그램으로 가공하려면 글을 다루기 쉬운 데이터 구조로 바꾸는 것이 편합니다. 이 변환기는 Markdown을 {type: 'document', children: […]} 형태의 JSON으로 바꾸고, 같은 형식의 JSON을 다시 Markdown 원고로 만들어 줍니다.

브라우저 처리
샘플 결과
{
  "type": "document",
  "children": [
    {
      "type": "heading",
      "depth": 1,
      "value": "제목",
      "line": 1
    },
    {
      "type": "listItem",
      "value": "하나",
      "line": 2
    },
    {
      "type": "listItem",
      "value": "둘",
      "line": 3,
      "checked": true
    }
  ]
}
자바스크립트가 활성화되면 이 영역이 실제 입력, 실행, 결과 패널로 바뀝니다.

Markdown ↔ JSON AST 변환기 사용 가이드

문서를 프로그램으로 가공하려면 글을 다루기 쉬운 데이터 구조로 바꾸는 것이 편합니다. 이 변환기는 Markdown을 {type: 'document', children: […]} 형태의 JSON으로 바꾸고, 같은 형식의 JSON을 다시 Markdown 원고로 만들어 줍니다.

노드 종류는 heading(depth), paragraph, listItem(ordered, checked), blockquote, code(lang), thematicBreak이고, 각 노드에는 원문 줄 번호(line)가 들어갑니다. JSON → Markdown에서는 연속된 목록 항목은 한 목록으로 붙이고, 나머지 블록 사이에는 빈 줄을 넣습니다.

인라인 서식은 value 글자 안에 그대로 남으므로, JSON에서 value를 고치면 굵게·링크 표기도 함께 유지됩니다.

사용 방법

  1. '변환 방향'에서 'Markdown → JSON AST' 또는 'JSON AST → Markdown'을 고릅니다.
  2. 'Markdown 또는 JSON AST' 칸에 변환할 Markdown이나 JSON을 붙여 넣습니다.
  3. '실행'을 누른 뒤 결과를 '결과 복사'하거나 '다운로드'합니다.

예시: 제목과 체크리스트 (Markdown → JSON AST)

입력
# 제목
- 하나
- [x] 둘
결과
{
  "type": "document",
  "children": [
    {
      "type": "heading",
      "depth": 1,
      "value": "제목",
      "line": 1
    },
    {
      "type": "listItem",
      "value": "하나",
      "line": 2
    },
    {
      "type": "listItem",
      "value": "둘",
      "line": 3,
      "checked": true
    }
  ]
}

이 JSON을 'JSON AST → Markdown'으로 되돌리면 '# 제목', 빈 줄, '- 하나', '- [x] 둘'이 됩니다.

이럴 때 쓰면 좋아요

  • 문서를 스크립트로 가공하기 전에 구조화된 데이터로 바꿀 때
  • 체크리스트의 완료 상태를 JSON으로 다른 도구에 넘길 때
  • JSON으로 만든 목차·항목 데이터를 Markdown 문서로 출력할 때
  • AST 구조를 배우며 Markdown이 어떻게 해석되는지 확인할 때

문제가 생겼을 때

'JSON AST가 올바른 JSON 형식이 아닙니다'

JSON → Markdown 방향은 Markdown → JSON AST 결과와 같은 형식이어야 합니다. 큰따옴표, 쉼표, 괄호 짝을 JSON 포맷터로 먼저 확인하세요.

되돌린 Markdown의 번호 목록이 모두 1.

번호 목록은 '1.'로 통일해 씁니다. 대부분의 Markdown 렌더러는 화면에서 1, 2, 3으로 자동 번호를 매깁니다.

활용 팁

  • children 배열의 순서를 바꾸고 되돌리면 문서의 블록 순서를 프로그램으로 재배치할 수 있습니다.
  • line 값은 원문 위치 참고용이라 JSON → Markdown 변환에는 쓰이지 않습니다. 지워도 됩니다.

자주 묻는 질문

표준 mdast 형식과 같나요?

비슷하지만 더 단순합니다. 인라인 노드를 나누지 않고 value 글자로 두므로, remark 같은 도구의 mdast와 바로 호환되지는 않습니다.

children 대신 배열만 넣어도 되나요?

네. JSON → Markdown은 최상위가 노드 배열이어도 읽습니다.

알 수 없는 type은 어떻게 되나요?

value 글자만 문단처럼 출력합니다. 지원하는 종류는 heading, paragraph, listItem, blockquote, code, thematicBreak입니다.