[js] 折叠代码块

本贴最后更新于 254 天前,其中的信息可能已经天翻地覆

希望可以折叠代码

能否写一个代码片段来折叠过长的代码,例如 CSDN 的代码 😄

image.png

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    25893 引用 • 107282 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    177 引用 • 1255 回帖
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    9945 引用 • 45161 回帖 • 76 关注
1 操作
JeffreyChen 在 2024-10-03 16:49:46 更新了该帖

相关帖子

被采纳的回答

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 对所有代码块生效,数值可以自己改:

    /* 代码块限制最大高度 CSS片段 */ div:not(#preview) > .protyle-wysiwyg .code-block .hljs { max-height: 800px; }
    1 回复
  • CongSec

    感谢,能否以折叠的形式展开 😋

  • wilsons 5 1 评论

    我在 @JeffreyChen 的基础上,增加了 js 代码,不知是否是你想要的效果。

    亮色主题样式

    image.png

    暗色主题样式

    image.png

    js 代码如下 (仅需把下面代码放到 js 片段即可,代码中已含 css)

    代码备份地址:https://gitee.com/wish163/mysoft/blob/master/%E6%80%9D%E6%BA%90%E4%BB%A3%E7%A0%81%E5%9D%97%E8%B6%85%E5%87%BA%E6%8C%87%E5%AE%9A%E9%AB%98%E5%BA%A6%E6%8A%98%E5%8F%A0.js

    参数说明:
    const codeMaxHeight = 300,当代码块内容高度超出多少像素是折叠,注意:这里的高度是指.hljs 元素的高度,默认是 300px

    3 回复
    这个需求比较好玩啊
    HugZephyr
  • 提点需求:

    1. 启用代码时对已打开的文档生效
    2. 展开代码之后还需要一个按钮再次折叠
    1 回复
  • CongSec 2 评论

    我有一个 59 个代码块的文档,好像并没有生效,只是可以滑动,那个展开的按钮好像并没有出现

    1 回复
    重启思源
    JeffreyChen
    @JeffreyChen 不行,我将所有的代码片段,插件关闭后重启都不行
    CongSec
  • qiancang 1 评论

    直接在代码块按 ctrl+↑ 快捷键就好了,这个快捷键折叠一切块

    不过没法默认折叠、展开上级标题的时候会被一起展开
    JeffreyChen
  • 其实不用关闭插件等,新空间测试最靠谱,可否把文档导出上传下?

    1 回复
  • CongSec
    1 回复
  • 已修复,用新代码测试。

  • wilsons 2 评论

    启用代码时对已打开的文档生效

    这个启用代码时是指打开代码片段这个开关时吗?

    image.png

    目前仅启动代码片段开关后,刷新页面,已打开的文档才会生效。

    这两个需求,后续 @EmberSky 大佬将会进一步改进。

    1 回复
    只会研究一下需求 2: 展开代码之后还需要一个按钮再次折叠
    HugZephyr 1
    @EmberSky 嗯嗯,我改代码更新了从监听改成了 scroll 事件,发现思源大文本的时候,会有监听不到代码块被添加的情况,而且,思源会动态加载,只会显示文本的一部分,这一点要注意。
    wilsons
  • CongSec

    能否再提个小小的需求,就是当代码块在折叠状态时,鼠标不能滑动查看代码,因为当我们复习笔记的时候,鼠标滑动代码会给人一种鼠标失灵的感觉 😂

    1 回复
  • CongSec 1 评论

    这段代码还有一点致命的 bug,就是在运行这个代码情况下给代码块添加代码,会出现以下状况:a5b6c3a08982d7f82c07e25d4da0eb5.png48555b32e93d6dd211f798cd21c57f7.png

    4d23dcd6b4e4630de9f0cad13733d63.png

    复现这个 bug 需要刷新页面,也就是重启思源
    CongSec
    1. 折叠请等待 EmberSky 大佬的改进。
    2. 我这边无法重新你说的问题,如果问题能重复出现,请附上测试数据,并详细说明重现步骤。
      r65.gif
    3. 新版改进了,新增代码块时,思源代码块固定高度,无法滚动到底部定位光标问题。
    1 回复
  • CongSec

    即使使用新的也会有此 bug:
    ❤️

    1 回复
  • 抱歉,我这边无法重现。

    首先,在新空间尝试测试问题数及新数据,确保不是因为某些原因或缓存等造成影响导致意外。

    如果仍未解决,请参考 [js] 折叠代码块 - wilsons 的回帖 这里的回复

    另外,提醒下,思源代码片段,修改代码中后建议重启思源,否则系统中可能存在多份代码相互影响。

    1 回复
  • CongSec

    我在未安装任何插件,代码片段的新空间进行测试最新的代码,依旧还是有 bug,我的思源版本为 3.1.7

    1 回复
    1. 测试数据,2 测试步骤,保证 100% 能重现的步骤,第一步,第二步,第三步

    你给的视频只能说明你的环境出现过问题,无法告知别人是怎么出现的,这样的视频发再多都无用。

    重现步骤是有效排除 bug 的最重要的一步,无法重现的步骤很难解决。

    描述清楚问题和重现步骤这是最有效的沟通方式。

    1 回复
  • CongSec

    我刚才在虚拟机(一个新环境)中尝试过也是出现 bug,

    1. 随便选择一个较长代码块
    2. 运行 js 代码
    3. 退出思源
    4. 打开思源,在刚才的代码块中添加随意字符
    5. 退出思源
    6. 打开思源,你会看到会有多余的代码出现,严重的话就会出现较大的透明的框框,版本也是 3.1.7

    image.png

    2 回复
  • wilsons 1 1 评论

    好的,辛苦了,刚才一直无法重现,现在可以了,我空了看看

    修改完成之后可以发到代码片段标签下面吗
    EmptyLight
  • wilsons 1

    已修复,请用新代码测试。

    这个 bug 是当思源块有用户自定义 dom 时,提交块内容时,自定义 dom 被当做块内容的一部分被提交,代码块这里便当做了代码的一部分被提交。

    本次修改采用拦截思源块提交 api,并在提交前过滤自定义 dom 的临时解决方案。

    相关 bug 已提交思源官方:Issue #12684 · siyuan-note/siyuan

    1 回复
  • CongSec

    还是有些 bug,复现如下:

    1. 透明框框 BUG
      1. 随便选择一个较长代码块
      2. 运行 js 代码
      3. 退出思源
      4. 打开思源,在刚才的代码块中添加以下字符其中一个即可触发
        1. html 代码
          1. 例如
            1. <script>alert("xss");</script>
            2. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body> </html>
          2. image.png
        2. 同一笔记本中的图片
          1. image.png
      5. 退出思源
      6. 打开思源,会有一个透明框框,在导出为 word 时即可看到源码
    2. 无法删除代码块 bug
        1. 随便选择一个较长代码块
        2. 运行 js 代码
        3. 退出思源
        4. 删除代码块
        5. 退出思源
        6. 打开思源,可以看到刚才删去的代码块回来了
    1 回复
  • wilsons 1

    已修复,请用新代码测试。

    原因同 [js] 折叠代码块 - wilsons 的回帖

    2 回复
  • CongSec

    十分感谢大佬的代码

    ❤️❤️ ❤️❤️ ❤️❤️❤️❤️ ❤️❤️❤️❤️ ❤️❤️❤️❤️❤️ ❤️❤️❤️❤️❤️ ❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️ ❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️ ❤️❤️❤️❤️❤️❤️❤️❤️❤️ ❤️❤️❤️❤️❤️❤️❤️ ❤️❤️❤️❤️❤️ ❤️❤️❤️ ❤️❤️ ❤️
  • CongSec

    大佬能否适配下移动端 ❤️

    1 回复
  • wilsons 1

    已兼容,请用新代码测试。

请输入回帖内容 ...
CongSec
新手可以看我发的求助帖以及汇总帖子,很有帮助的!_! 网安笔记分享:http://congsec.xyz 广州

推荐标签 标签

  • Sillot

    Insights(注意当前设置 master 为默认分支)

    汐洛彖夲肜矩阵(Sillot T☳Converbenk Matrix),致力于服务智慧新彖乄,具有彖乄驱动、极致优雅、开发者友好的特点。其中汐洛绞架(Sillot-Gibbet)基于自思源笔记(siyuan-note),前身是思源笔记汐洛版(更早是思源笔记汐洛分支),是智慧新录乄终端(多端融合,移动端优先)。

    主仓库地址:Hi-Windom/Sillot

    文档地址:sillot.db.sc.cn

    注意事项:

    1. ⚠️ 汐洛仍在早期开发阶段,尚不稳定
    2. ⚠️ 汐洛并非面向普通用户设计,使用前请了解风险
    3. ⚠️ 汐洛绞架基于思源笔记,开发者尽最大努力与思源笔记保持兼容,但无法实现 100% 兼容
    29 引用 • 25 回帖 • 119 关注
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    10 引用 • 54 回帖 • 177 关注
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 35 关注
  • CAP

    CAP 指的是在一个分布式系统中, Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性),三者不可兼得。

    12 引用 • 5 回帖 • 636 关注
  • ZooKeeper

    ZooKeeper 是一个分布式的,开放源码的分布式应用程序协调服务,是 Google 的 Chubby 一个开源的实现,是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 4 关注
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用,支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    17 引用 • 7 回帖 • 2 关注
  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 157 关注
  • 印象笔记
    3 引用 • 16 回帖 • 1 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    693 引用 • 537 回帖
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高,单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 119 关注
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    326 引用 • 1395 回帖
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 819 关注
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 585 回帖
  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    59 引用 • 25 回帖 • 5 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 3 关注
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据。 这种动作(网页浏览,搜索和其他用户的行动)是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    177 引用 • 1255 回帖
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖
  • 996
    13 引用 • 200 回帖 • 4 关注
  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖 • 1 关注
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    434 引用 • 1238 回帖 • 592 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 560 关注
  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 233 回帖 • 2 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 794 关注
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端,也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • 国际化

    i18n(其来源是英文单词 internationalization 的首末字符 i 和 n,18 为中间的字符数)是“国际化”的简称。对程序来说,国际化是指在不修改代码的情况下,能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖