希望可以折叠代码
能否写一个代码片段来折叠过长的代码，例如 CSDN 的代码 😄
-
思源笔记
22926 引用 • 92174 回帖 • 1 关注
思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。
融合块、大纲和双向链接，重构你的思维。
-
代码片段
85 引用 • 516 回帖
代码片段分为 CSS 与 JS 两种代码，添加在 [设置 - 外观 - 代码片段] 中，这些代码会在思源笔记加载时自动执行，用于改善笔记的样式或功能。
用户在该标签下分享代码片段时需在帖子标题前添加
[css]或[js]用于区分代码片段类型。 -
Q&A
8404 引用 • 38297 回帖 • 156 关注
提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。
1 操作
JeffreyChen
在 2024-10-03 16:49:46 更新了该帖
相关帖子
被采纳的回答
-
wilsons • • 4付费者 捐赠者
我在 @JeffreyChen 的基础上，增加了 js 代码，不知是否是你想要的效果。
亮色主题样式
暗色主题样式
js 代码如下 （仅需把下面代码放到 js 片段即可，代码中已含 css）
参数说明：
const codeMaxHeight = 300，当代码块内容高度超出多少像素是折叠，注意：这里的高度是指.hljs 元素的高度，默认是 300px
请输入回帖内容
...
- 其他回帖
-
还是有些 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
- 查看全部回帖
