[js] 折叠代码块

希望可以折叠代码

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

image.png

  • 思源笔记

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

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

    21474 引用 • 84896 回帖
  • 代码片段

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

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

    34 引用 • 185 回帖
  • Q&A

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

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

相关帖子

被采纳的回答

欢迎来到这里!

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

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

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

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

  • wilsons 4 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 回复
    这个需求比较好玩啊
    EmberSky
  • 提点需求:

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

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

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

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

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

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

  • wilsons 2 评论

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

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

    image.png

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

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

    1 回复
    只会研究一下需求 2: 展开代码之后还需要一个按钮再次折叠
    EmberSky 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:20240930180055.mp4
    ❤️

    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
  • 已修复,请用新代码测试。

    这个 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 回复
  • 已修复,请用新代码测试。

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

    2 回复
  • CongSec

    十分感谢大佬的代码

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

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

    1 回复
  • 已兼容,请用新代码测试。

请输入回帖内容 ...
CongSec
没事别关注我, 因为发帖需要更多积分 广州

推荐标签 标签

  • 脑图

    脑图又叫思维导图,是表达发散性思维的有效图形思维工具 ,它简单却又很有效,是一种实用性的思维工具。

    23 引用 • 71 回帖
  • 国际化

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

    8 引用 • 26 回帖 • 1 关注
  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 693 关注
  • flomo

    flomo 是新一代 「卡片笔记」 ,专注在碎片化时代,促进你的记录,帮你积累更多知识资产。

    5 引用 • 103 回帖
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    90 引用 • 898 回帖
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 33 关注
  • CentOS

    CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码,因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    238 引用 • 224 回帖
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    176 引用 • 815 回帖
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成,还支持通过插件进行扩展。

    10 引用 • 5 回帖
  • golang

    Go 语言是 Google 推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发 Go,是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    497 引用 • 1387 回帖 • 307 关注
  • IBM

    IBM(国际商业机器公司)或万国商业机器公司,简称 IBM(International Business Machines Corporation),总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国,是全球最大的信息技术和业务解决方案公司,拥有全球雇员 30 多万人,业务遍及 160 多个国家和地区。

    17 引用 • 53 回帖 • 134 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    122 引用 • 73 回帖
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖 • 1 关注
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    287 引用 • 4484 回帖 • 668 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3170 引用 • 8209 回帖 • 2 关注
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖 • 1 关注
  • SSL

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 439 关注
  • MySQL

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

    676 引用 • 535 回帖
  • CongSec

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

    1 引用 • 1 回帖 • 4 关注
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 383 回帖 • 3 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    25 引用 • 191 回帖 • 17 关注
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 7 关注
  • Gzip

    gzip (GNU zip)是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件,它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式,或者说一种文件格式。

    9 引用 • 12 回帖 • 133 关注
  • 以太坊

    以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖 • 8 关注
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目,是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台,为开发者提供便利的 API 接口来调用服务,让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 467 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    66 引用 • 114 回帖 • 252 关注
  • JWT

    JWT(JSON Web Token)是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准(RFC 7519),定义了一种简洁的,自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 5 关注