comark

개요

• TypeScript로 작성된 Markdown 파서로, CommonMark/GFM(및 소규모 컴포넌트/속성 확장)을 작고 직렬화 가능한 AST로 변환합니다.
• AST는 빌드 타임, 런타임 또는 텍스트 스트리밍 중(예: LLM 출력)에 생성될 수 있으며, 이후 특정 프레임워크 렌더러에 의해 렌더링됩니다.

주요 기능

• 순수 함수 파싱 – parseMarkdown(md)는 일반 JavaScript 구조(['tag', props, …children])를 반환합니다. 부작용이 없으므로 데이터베이스, CMS 또는 실시간 LLM 출력의 콘텐츠를 재빌드 없이 파싱할 수 있습니다.
• 스트리밍 지원 – 파서가 미완성 구문(굵게, 코드 블록, 컴포넌트)을 자동으로 닫아주므로 AI가 생성 중인 부분적인 출력을 프레임 단위로 표시할 수 있습니다.
• 하나의 AST, 다수의 렌더러 – 동일한 AST를 React, Vue, Svelte, Angular, 일반 HTML 또는 ANSI 터미널 출력용 렌더러에 전달할 수 있습니다.
• 컴포넌트 구문 – 인라인 사용자 정의 컴포넌트를 ::component{…} … ::를 사용하여 Markdown 내에 작성할 수 있습니다(예: 알림, 수식). 네이티브 요소의 속성은 {.class}를 통해 지원됩니다.
• 플러그인 생태계 – Shiki 구문 강조, KaTeX 수식, Mermaid 다이어그램, TOC, 알림, 각주용 내장 플러그인과 기존 markdown-it 플러그인과의 호환성을 제공합니다.
• 성능 – markdown-it을 TypeScript로 재작성한 markdown-exit를 기반으로 구축되었습니다.

사용 방법

1. 핵심 패키지 설치:

   npm install comark
   

2. Markdown을 AST로 파싱:

   import { parseMarkdown } from 'comark'
   const tree = await parseMarkdown('# Hello **World**')
   // → { nodes: [['h1', { id: 'hello' }, 'Hello ', ['strong', {}, 'World']]], … }
   

3. UI 스택에 맞는 렌더러 패키지를 선택하고 동일한 AST 또는 원시 Markdown 문자열을 전달합니다.
   • Vue – @comark/vue
   • React – @comark/react
   • Svelte – @comark/svelte
   • Angular – @comark/angular
   • HTML – @comark/html
   • ANSI (터미널) – @comark/ansi
4. 렌더링 시 필요에 따라 플러그인(예: KaTeX 수식) 및 사용자 정의 컴포넌트를 추가합니다.

AI 생성 콘텐츠에서의 중요성

• LLM은 부분적인 Markdown을 스트리밍하는 경우가 많으므로, Comark의 자동 닫기 로직을 통해 모델이 입력 중일 때도 UI를 안정적으로 유지할 수 있습니다.
• 직렬화 가능한 AST를 통해 파싱된 표현을 저장하거나 전송할 수 있어 클라이언트 측에서 반복적인 파싱을 피할 수 있습니다.
• 파서가 프레임워크에 독립적이므로, 동일한 AI 생성 Markdown을 웹 앱, 네이티브 스타일 프레임워크 또는 터미널 도구에서 재작성 없이 표시할 수 있습니다.

패키지

패키지	용도
comark	핵심 파서, AST 유틸리티, 플러그인 시스템
@comark/vue	Vue 3 렌더러
@comark/react	React 렌더러 (Next.js Server Components 포함)
@comark/svelte	Svelte 5 렌더러
@comark/angular	Angular 렌더러
@comark/nuxt	자동 가져오기 지원 Nuxt 모듈
@comark/html	일반 HTML 문자열로 렌더링
@comark/ansi	터미널용 ANSI로 렌더링

라이선스

• MIT, 친절한 “Made with ❤️” 문구 포함.

결론 Comark는 현대적이고 스트리밍을 고려한 Markdown 파서이자 멀티 프레임워크 렌더러입니다. 실시간 또는 AI 생성 Markdown을 파싱의 속도와 일관성을 유지하면서 다양한 프론트엔드에서 표시해야 하는 개발자에게 적합합니다.