[js] 折叠代码块

希望可以折叠代码

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

image.png

  • 思源笔记

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

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

    22250 引用 • 88929 回帖
  • 代码片段

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

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

    63 引用 • 348 回帖 • 1 关注
  • Q&A

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

    8073 引用 • 36877 回帖 • 162 关注
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 回复
  • CongSec
    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
  • 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
没事别关注我, 因为发帖需要更多积分 广州

推荐标签 标签

  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    124 引用 • 169 回帖
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖 • 2 关注
  • WordPress

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

    66 引用 • 114 回帖 • 227 关注
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    6 引用 • 38 回帖
  • 学习

    “梦想从学习开始,事业从实践起步” —— 习近平

    169 引用 • 506 回帖
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 65 回帖 • 441 关注
  • 音乐

    你听到信仰的声音了么?

    60 引用 • 511 回帖 • 1 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    131 引用 • 1114 回帖 • 128 关注
  • 书籍

    宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”

    77 引用 • 390 回帖
  • 安全

    安全永远都不是一个小问题。

    199 引用 • 816 回帖
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    107 引用 • 295 回帖
  • 脑图

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

    26 引用 • 84 回帖
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    566 引用 • 3532 回帖
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    15 引用 • 122 回帖
  • wolai

    我来 wolai:不仅仅是未来的云端笔记!

    2 引用 • 14 回帖
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 26 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 727 关注
  • Spring

    Spring 是一个开源框架,是于 2003 年兴起的一个轻量级的 Java 开发框架,由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构,分层架构允许使用者选择使用哪一个组件,同时为 JavaEE 应用程序开发提供集成的框架。

    944 引用 • 1459 回帖 • 24 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    55 引用 • 85 回帖
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。

    19 引用 • 31 回帖 • 1 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1347 回帖
  • Shell

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

    122 引用 • 74 回帖 • 2 关注
  • 反馈

    Communication channel for makers and users.

    123 引用 • 911 回帖 • 243 关注
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。

    943 引用 • 943 回帖
  • 30Seconds

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

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