지난 글에서 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. 후기
정말 하루에 하나를 추가하고 나면 시간이 다 간다.
그래도 개학하기 전에는 서비스를 완성해야 하는데 걱정이다.
논문은 쓸수나 있을지...
조금더 분발해야겠다.