希望可以折叠代码
能否写一个代码片段来折叠过长的代码，例如 CSDN 的代码 😄
-
思源笔记
22921 引用 • 92157 回帖 • 1 关注
思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。
融合块、大纲和双向链接，重构你的思维。
-
代码片段
85 引用 • 514 回帖
代码片段分为 CSS 与 JS 两种代码，添加在 [设置 - 外观 - 代码片段] 中，这些代码会在思源笔记加载时自动执行，用于改善笔记的样式或功能。
用户在该标签下分享代码片段时需在帖子标题前添加
[css]或[js]用于区分代码片段类型。 -
Q&A
8403 引用 • 38293 回帖 • 156 关注
提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。
1 操作
JeffreyChen
在 2024-10-03 16:49:46 更新了该帖
相关帖子
被采纳的回答
-
wilsons • • 4付费者 捐赠者
我在 @JeffreyChen 的基础上，增加了 js 代码，不知是否是你想要的效果。
亮色主题样式
暗色主题样式
js 代码如下 （仅需把下面代码放到 js 片段即可，代码中已含 css）
参数说明：
const codeMaxHeight = 300，当代码块内容高度超出多少像素是折叠，注意：这里的高度是指.hljs 元素的高度，默认是 300px
请输入回帖内容
...
-
JeffreyChen • • 2
对所有代码块生效，数值可以自己改：
/* 代码块限制最大高度 CSS片段 */ div:not(#preview) > .protyle-wysiwyg .code-block .hljs { max-height: 800px; }1 回复 -
我在 @JeffreyChen 的基础上，增加了 js 代码，不知是否是你想要的效果。
亮色主题样式
暗色主题样式
js 代码如下 （仅需把下面代码放到 js 片段即可，代码中已含 css）
参数说明：
const codeMaxHeight = 300，当代码块内容高度超出多少像素是折叠，注意：这里的高度是指.hljs 元素的高度，默认是 300px3 回复这个需求比较好玩啊EmberSky • -
-
我有一个 59 个代码块的文档，好像并没有生效，只是可以滑动，那个展开的按钮好像并没有出现
1 回复重启思源@JeffreyChen 不行，我将所有的代码片段，插件关闭后重启都不行CongSec • -
-
-
- 折叠请等待 EmberSky 大佬的改进。
- 我这边无法重新你说的问题，如果问题能重复出现，请附上测试数据，并详细说明重现步骤。
- 新版改进了，新增代码块时，思源代码块固定高度，无法滚动到底部定位光标问题。
1 回复1 引用 -
-
抱歉，我这边无法重现。
首先，在新空间尝试测试问题数及新数据，确保不是因为某些原因或缓存等造成影响导致意外。
如果仍未解决，请参考 [js] 折叠代码块 - wilsons 的回帖 这里的回复
另外，提醒下，思源代码片段，修改代码中后建议重启思源，否则系统中可能存在多份代码相互影响。
1 回复 -
-
已修复，请用新代码测试。
这个 bug 是当思源块有用户自定义 dom 时，提交块内容时，自定义 dom 被当做块内容的一部分被提交，代码块这里便当做了代码的一部分被提交。
本次修改采用拦截思源块提交 api，并在提交前过滤自定义 dom 的临时解决方案。
相关 bug 已提交思源官方：Issue #12684 · siyuan-note/siyuan
1 回复1 引用 -
还是有些 bug，复现如下：
- 透明框框 BUG
- 随便选择一个较长代码块
- 运行 js 代码
- 退出思源
- 打开思源，在刚才的代码块中添加以下字符其中一个即可触发
- html 代码
- 例如
-
<script>alert("xss");</script> -
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body> </html>
-
- 例如
- 同一笔记本中的图片
- html 代码
- 退出思源
- 打开思源，会有一个透明框框，在导出为 word 时即可看到源码
- 无法删除代码块 bug
-
- 随便选择一个较长代码块
- 运行 js 代码
- 退出思源
- 删除代码块
- 退出思源
- 打开思源，可以看到刚才删去的代码块回来了
-
1 回复 - 透明框框 BUG
-
请输入回帖内容
...