react-syntax-highlighter 这个插件高亮展示代码块，怎么才能让里面的代码实现展开收起呢？

react-syntax-highlighter 这个插件高亮展示代码块，怎么才能让里面的代码实现展开收起呢？
就是比如后台返回了一大坨代码，前端需要渲染到页面上，里面代码是假如说第50行--第100行可以实现展开收起这种功能

要实现展开收起功能，可以结合react-syntax-highlighter和一些React组件库的相关组件来完成，这里提供一个基于Ant Design和react-syntax-highlighter的示例代码：

jsx
import { Collapse } from 'antd';
import SyntaxHighlighter from 'react-syntax-highlighter';
import { atomOneDark } from 'react-syntax-highlighter/dist/esm/styles/hljs';

const { Panel } = Collapse;

const code = `
function myFunction() {
  console.log('Hello, world!');
}
`;

const CodeCollapsible = () => {
  return (
    <Collapse>
      <Panel header="查看代码" key="1">
        <SyntaxHighlighter language="javascript" style={atomOneDark}>
          {code}
        </SyntaxHighlighter>
      </Panel>
    </Collapse>
  );
};

在这个示例中，我们使用了Ant Design的Collapse组件来实现展开收起的功能，并将react-syntax-highlighter作为折叠内容的子组件进行渲染。在Collapse组件中，我们通过添加一个Panel来生成代码块的标题部分，并使用SyntaxHighlighter组件渲染代码块的内容。

需要注意的是，在这个示例中我们仅仅演示了如何使用Collapse组件包裹SyntaxHighlighter组件实现展开收起功能，如果想要实现更为灵活的、自定义化的折叠效果，需要根据具体需求编写相应的代码实现。

• 这篇博客: 【笔记】Create React APP 文档略读中的 Syntax highlighting 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 各个开发工具都有一些代码语法高亮工具。