Antdesign React之markdown文档渲染

能够渲染代码块，样式可以让ai生成，使用前需要安装对应依赖
markdownview.tsx

import React from 'react';
import ReactMarkdown from 'react-markdown';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';

interface MarkdownViewProps {
  content: string;
}

const MarkdownView: React.FC<MarkdownViewProps> = ({ content }) => {
  if (!content) return null;

  return (
    <div className="markdown-container">
      <ReactMarkdown
        components={{
          code({ node, inline, className, children, ...props }: {
            node?: any;
            inline?: boolean;
            className?: string;
            children?: React.ReactNode;
          }) {
            const match = /language-(\w+)/.exec(className || '');
            return !inline && match ? (
              <SyntaxHighlighter
                style={vscDarkPlus}
                language={match[1]}
                PreTag="div"
              >
                {String(children).replace(/\n$/, '')}
              </SyntaxHighlighter>
            ) : (
              <code className={className} {...props}>
                {children}
              </code>
            );
          },
          img({ src, alt, ...props }) {
            const publicPath = process.env.PUBLIC_URL || '';
            const imgSrc = src?.startsWith('http') ? src : `${publicPath}${src}`;
            return (
              <img
                src={imgSrc}
                alt={alt}
                style={{ maxWidth: '100%' }}
                {...props}
              />
            );
          }
        }}
      >
        {content}
      </ReactMarkdown>
    </div>
  );
};

export default MarkdownView;

使用方法

import MarkdownView from '@/pages/MarkdownView/MarkdownView';

export default () => {
  return(
    <MarkdownView content={`123`} />
  )
};