使用ReactMarkdown美化AI SDK信息

在上一篇文章中，我们使用Vercel的AI SDK构建了一个chatGPT服务。

但在对话时，文字显得有些单调。

虽然能看懂，但文字贴得太紧。

简单用className设置whitespace-pre-wrap也能让它变漂亮些。

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

这样做的话至少会有间距。

但仔细看会发现它用的是Markdown。

那么如果将回答放入react-markdown组件中，可能会漂亮些。

1. 库安装及设置

首先安装所需库。

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

• react-markdown：将Markdown渲染为HTML。

• remark-gfm：在现有Markdown基础上添加一些功能。

• 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>
...

这样之后，可以看到上面Markdown语法得到了强调。

表格或内联代码块也都可以。

代码高亮颜色可以在highlight官方站点查看。

进入后，可以浏览各种样式并选择最喜欢的。

chatGPT推荐的样式是Default, Atom One Dark, Solarized Light, GitHub。

2. 后记

每天增加一个功能就占了一整天。

但必须在开学前完成服务，真让人担心。

不知是否能写出论文……

需要更加努力。