DeepSeek-R1 think 标签 markdown 渲染

DeepSeek-R1 思考部分返回：<think>xxx</think>

通过 rehype-raw 自定义渲染 think 标签为 blockquote。

yarn add rehype-raw

但 think 中返回的数据可能并不是标准的 blockquote 格式，因此需要对其中的内容做转换。

const processedValue = useMemo(() => {
	return value.replace(/<think>([\s\S]*?)<\/think>/g, (_, content) => {
	    const lines = content.trim().split('\n');
	    const quotedLines = lines.map((line: string) => `> ${line}`).join('\n');
	    return quotedLines;
	  });
}, [value]);

完整代码：

import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import './index.less';
import { useMemo } from 'react';
import rehypeRaw from 'rehype-raw';

export interface MarkDwonProps {
  value: string;
}

function MarkDwon(props: MarkDwonProps) {
  let { value } = props;

  const components = useMemo<any>(
    () => ({
      think: 'blockquote',
    }),
    [],
  );

  const processedValue = useMemo(() => {
    return value.replace(/<think>([\s\S]*?)<\/think>/g, (_, content) => {
      const lines = content.trim().split('\n');
      const quotedLines = lines.map((line: string) => `> ${line}`).join('\n');
      return quotedLines;
    });
  }, [value]);

  return (
    <div className="markdown-wrapper">
      <ReactMarkdown
        remarkPlugins={[remarkGfm]}
        rehypePlugins={[rehypeRaw]}
        linkTarget={'_blank'}
        components={components}
      >
        {processedValue}
      </ReactMarkdown>
    </div>
  );
}

export default MarkDwon;