I want to add an expand/collapse feature to Code Blocks

[feliming]

有的代码块太长了，直接铺开占的篇幅很大，我想有的 Code Blocks 增加一个展开/收起功能。

我预期在 ```js title="hello.js" {1,3-5} 后增加一个 toggled，如果检测到这属性就默认隐藏 <pre></pre>，然后提供一个按钮，可以控制 <pre></pre> 的显示或者隐藏

我试图通过自定义主题来解决，但发现始终没有找到能改变 <Content /> 内关于 Code Blocks 渲染的组件。

我试了复制 theme-default 里的 src/layout/DocLayout 来修改并在自定义主题中引入它，但通过日志，发现并没有执行 DocLayout/docCompents/pre.tsx 和 DocLayout/docCompents/code/index.tsx。

后来看 <Content /> 来自于@rspress/runtime，于是把这个组件的源码也复制出来，发现也无从下手。

恳请指教，多谢

[Timeless0911]

You can try to shift your thinking and include the code block through a foldable component.

// components/Collapse.tsx
import Collapse from 'antd/es/collapse/Collapse';
import './Collapse.scss';

const CollapsePanel = Collapse.Panel;

export { Collapse, CollapsePanel };

And use like:

https://github.com/web-infra-dev/rspack/blob/cff4e8b37c9190bd805d68b22f99272fe66236d1/website/docs/zh/api/plugin-api/context-module-factory-hooks.mdx?plain=1#L13-L32

[feliming]

多谢多谢，我太执着于去修改渲染出来的代码块了

[SoonIter]

same feature implemented in https://lynxjs.org/blog/lynx-3-2.html