ReactMarkdown으로 AI SDK 메세지 꾸미기

지난 글에서 Vercel의 AI SDK를 이용한 chatGPT 서비스를 만들어보았다.

그런데 대화를 해보면 글이 뭔가 밋밋하다.

뭐라고 하는지는 알겠는데 글이 너무 바짝 붙어있다.

그냥 간단하게 className으로 whitespace-pre-wrap을 써줘도 이쁘게 바뀌긴 한다.

<div className="text-gray-800 whitespace-pre-wrap">
    {message.content}
</div>

이렇게 하니 그래도 띄어쓰기는 해준다.

그런데 잘보면 이 녀석 마크다운으로 대답한다.

그럼 대답을 react-markdown 컴포넌트로 넣어주면 조금 이뻐질것 같았다.

1. 라이브러리 설치 및 세팅

먼저 필요한 라이브러리들을 깔아보자.

yarn add react-markdown remark-gfm rehype-highlight highlight.js

• react-markdown : 마크다운을 html로 랜더링 해줌.

• remark-gfm : 기존의 마크다운에 몇가지 기능을 추가한 것.

• rehype-highlight : 코드 하이라이트 기능. 다만 조금 세부적인 설정이 필요하다.

• highlight.js : 코드를 파싱해서 알맞게 강조해 줌.

이제 이걸 div 내부에 넣어주면 된다.

주의할 점은 class에서 whitespace 옵션은 빼주는걸 잊지 말자.

"use client";

import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import rehypeHighlight from "rehype-highlight";
import "highlight.js/styles/atom-one-dark.css";

...
<div className="text-gray-800">
    <ReactMarkdown
    className="w-full h-5/6 prose"
    remarkPlugins={[remarkGfm]}
    rehypePlugins={[rehypeHighlight]}
    >
    {message.content}
    </ReactMarkdown>
</div>
...

이렇게 하고나면 위와 같이 마크다운 문법이 강조되는 것을 볼 수 있다.

테이블이나 인라인 코드블럭도 가능하다.

코드 하이라이트 색상은 highllight 공식 사이트에서 확인할 수 있다.

들어가서 여러가지 스타일들을 둘러보면서 가장 마음에 드는걸 선택하면 된다.

chatGPT가 추천하는 스타일은 Default, Atom One Dark, Solarized Light, GitHub 였다.

2. 후기

정말 하루에 하나를 추가하고 나면 시간이 다 간다.

그래도 개학하기 전에는 서비스를 완성해야 하는데 걱정이다.

논문은 쓸수나 있을지...

조금더 분발해야겠다.