[개인] CSS로 커스텀하는 MD 렌더러

2025/07/10 ~ 2025/07/17배포 링크GitHub

역할 개인 프로젝트

요약 CSS로만 간편하게 커스텀하는 마크다운 렌더러 JS 모듈에 대한 학습 및 오픈소스를 배포하고 유지보수하는 경험

React MD Renderer

$ npm install @frfla/react-md-renderer

https://frfla.github.io/react-md-renderer/docs에서 사용 방법을 보실 수 있으며, 한/영 문서를 모두 제공합니다.

마크다운 주입과 CSS 작성만으로 커스텀할 수 있는 마크다운 렌더러

TS
...
 return ( ...
   <Markdown
       markdown={`# React\n\n[markdown renderer](https://www.google.com)\n\n**Bold Text** Plain Text`}
       CSS={{
         h1: {
           fontFamily: 'serif',
         },
       }}
  />
 ... )
 ...

설계 결정

  • CSS Output을 () => Object / string / Object 세 형태로 제공해 emotion, vanilla-extract, CSS Modules(className prefix 지원) 어디서든 사용 가능

  • emotion의 타입을 이용한 CSS 타입 검사 제공

  • 편의를 제공할수록 커스텀 제약이 커집니다. 이 라이브러리는 "컴포넌트 커스텀을 포기하고 CSS 커스텀만 허용"하는 지점을 의도적으로 선택했습니다.

왜 만들었나

실무 프로젝트에서 LLM이 생성한 마크다운을 파싱해 컴포넌트로 만들어야 했는데, 기존 마크다운 툴은 요소마다 컴포넌트를 작성해야 해서 공수 대비 아웃풋이 나빴습니다. 또 이런 류의 프로젝트가 여러 번 진행될 것이라고 예상되었기 때문에 제작을 결정하게 됐습니다.

"마크업은 건드리지 않고 스타일만 바꾸고 싶다"는 상황에 있는 개발자를 위해, 사용 중인 CSS 라이브러리에 구애받지 않는 렌더러를 만들었습니다.