如何将OpenAI响应内容解析为Markdown并在Next.js中渲染？

步骤1：安装Markdown解析库 #

安装轻量易用的marked库来解析Markdown文本：

npm install marked

步骤2：在UI组件中集成解析逻辑 #

根据你的流式返回场景，分两种情况处理：

静态内容渲染 #

如果是已完成的非流式消息，直接解析后渲染：

import { marked } from 'marked';

// 替换原有的 {m.content as string} 部分
{m.role === 'assistant' ? (
  <span 
    className={cn(
      "my-2",
      "bg-neutral-100 dark:bg-neutral-700 px-4 py-3 rounded-full"
    )}
    dangerouslySetInnerHTML={{ __html: marked(m.content as string) }}
  />
) : (
  <span 
    className={cn(
      "my-2",
      "bg-neutral-800 px-4 py-3 rounded-full"
    )}
  >
    {m.content as string}
  </span>
)}

流式内容渲染 #

因为你的Action返回的是文本流，需要在内容接收过程中逐步解析：

import { useState, useEffect } from 'react';
import { marked } from 'marked';

// 假设组件内有状态存储流式内容
const [assistantStream, setAssistantStream] = useState('');
const [renderedMarkdown, setRenderedMarkdown] = useState('');

useEffect(() => {
  // 每次流内容更新时重新解析Markdown
  setRenderedMarkdown(marked(assistantStream));
}, [assistantStream]);

// 渲染流式内容时使用解析后的结果
<span 
  className="my-2 bg-neutral-100 dark:bg-neutral-700 px-4 py-3 rounded-full"
  dangerouslySetInnerHTML={{ __html: renderedMarkdown }}
/>

步骤3：添加基础样式（可选） #

为解析后的Markdown元素添加样式，提升可读性：

/* 在全局样式或组件样式中添加 */
.markdown-content p {
  margin: 0.5em 0;
}
.markdown-content strong {
  font-weight: 700;
}
.markdown-content ul, .markdown-content ol {
  padding-left: 1.5em;
  margin: 0.5em 0;
}
.markdown-content code {
  background-color: #f3f4f6;
  padding: 0.1em 0.3em;
  border-radius: 3px;
}
.markdown-content pre {
  background-color: #f3f4f6;
  padding: 1em;
  border-radius: 6px;
  overflow-x: auto;
}

注意要给包含Markdown的元素加上markdown-content类名。

步骤4：安全防护 #

使用dangerouslySetInnerHTML时，建议开启marked的 sanitize 选项防止XSS：

const html = marked(m.content as string, { sanitize: true });
<span dangerouslySetInnerHTML={{ __html: html }} />

内容的提问来源于stack exchange，提问作者Ala Eddine Menai