MarkdownPreview 컴포넌트로 코드 하이라이트 구현

🤖 643 in / 665 out / 1308 total tokens

react-markdown과 rehype-highlight 조합으로 마크다운 프리뷰 컴포넌트를 만들었다. 클라이언트 컴포넌트로 선언하고 remark-gfm으로 GFM 문법을 지원하게 했다. rehype-highlight가 코드 블록에 자동으로 토큰 클래스를 붙여주니 별도 파싱 로직 없이 깔끔하게 하이라이트가 된다.

globals.css에는 .markdown-preview 클래스 스코프로 헤딩, 리스트, 코드 블록 스타일을 정의했다. 기존 .prose 클래스와 분리한 건 블로그 글 본문과 프리뷰 영역의 스타일을 독립적으로 관리하기 위해서다. 코드 블록은 라인 번호와 복사 버튼 영역까지 고려해 패딩을 잡았다.

"use client";
 
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import rehypeHighlight from "rehype-highlight";
 
export default function MarkdownPreview({ content }: { content: string }) {
  return (
    <div className="markdown-preview">
      <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeHighlight]}>
        {content}
      </ReactMarkdown>
    </div>
  );
}

rehype-highlight 쓸 때 highlight.js 테마 CSS 임포트 잊으면 토큰만 잔뜩 생기고 색은 흑백이다. 처음엔 왜 안 되나 했는데 CSS가 빠져서 그런 거였다.