是否有可能制作一个类似面板的 React 组件，显示带有行号和折叠功能的源代码？

Posted 2023-02-23

【中文标题】是否有可能制作一个类似面板的 React 组件，显示带有行号和折叠功能的源代码？

【英文标题】：Is it even possible to make a panel-like React component showing source code with line number and collapsing function?

【发布时间】：2021-11-03 01:27:44

【问题描述】：

我现在正在开发的网站有一个可折叠的源代码视图面板。 而且我不知道如何实现一个 React 组件来做同样的事情，我真的很抱歉我只能提供我想要的示例。

this site 上有一个代码查看面板，我想要与本网站上完全相同的面板。

https://ftmscan.com/address/0xce761d788df608bd21bdd59d6f4b54b2e27f25bb#contracts

solidity源代码视图面板上有一个折叠功能，我不知道如何实现这个功能。

有没有可以解析solidity代码的模块，还是我必须创建一个新的逻辑来解析代码？

总结我的问题；

制作一个可以查看源代码的 React 组件。 如何为该组件添加折叠功能？

另外，我目前使用的是material-ui 4.12.3，React版本是17.0.2

【问题讨论】：

只要有足够的时间、金钱和甜甜圈，一切皆有可能。

【参考方案1】：

看起来他们正在使用Ace editor。

在npmjs 上有多个 Ace 编辑器的 React 实现。我建议你研究其中之一。 （然后您还可以“免费”在代码编辑器中展开/折叠。）