如何在React应用中实现带复制功能的JSON代码块高亮展示

实现代码 #

import React from "react";
import { Card, Typography, message } from "antd";
import { CopyOutlined } from "@ant-design/icons";
import Highlight from 'react-highlight';
// 可替换为其他highlight.js主题样式
import 'highlight.js/styles/github-dark.css';

const { Paragraph } = Typography;

const ResponsesDataView = React.memo((props) => {
  // 格式化JSON，生成多行代码结构
  const formattedJson = JSON.stringify(props.jsonData, null, 2);

  const handleCopySuccess = () => {
    message.success('JSON内容已复制到剪贴板');
  };

  return (
    <Card 
      size="small"
      extra={
        <Paragraph 
          copyable={{ 
            text: formattedJson,
            onCopy: handleCopySuccess
          }}
          style={{ margin: 0 }}
        >
          <CopyOutlined /> 复制
        </Paragraph>
      }
    >
      <Highlight language="json">
        {formattedJson}
      </Highlight>
    </Card>
  );
});

export default ResponsesDataView;

改动说明 #

• 格式化JSON字符串：调用JSON.stringify时传入第三参数为缩进空格数，输出的内容为多行结构化格式，解决原来的行内展示问题
• 引入高亮主题样式：react-highlight依赖highlight.js的主题css才能正常渲染高亮效果，可根据界面风格替换为其他主题
• 新增复制能力：借助antd Typography内置的copyable配置实现一键复制，同时添加复制成功提示，使用体验更友好
• 复制按钮放在Card右上角extra区域，不占用代码展示空间，布局更合理

注意事项 #

如果项目未安装antd图标库，执行以下命令安装即可：
npm install @ant-design/icons

内容的提问来源于stack exchange，提问作者Dmap