[js] 折叠代码块

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

希望可以折叠代码

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

image.png

  • 思源笔记

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

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

    25901 引用 • 107343 回帖
  • 代码片段

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

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

    177 引用 • 1257 回帖
  • Q&A

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

    9948 引用 • 45183 回帖 • 77 关注
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 广州

推荐标签 标签

  • Telegram

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

    5 引用 • 35 回帖
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言,应用广泛。C++ 支持多种编程范式,面向对象编程、泛型编程和过程化编程。

    108 引用 • 153 回帖
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    58 引用 • 22 回帖 • 13 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    89 引用 • 150 回帖
  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    10 引用 • 15 回帖 • 9 关注
  • 宕机

    宕机,多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态,也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态,也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 73 关注
  • Docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的操作系统上。容器完全使用沙箱机制,几乎没有性能开销,可以很容易地在机器和数据中心中运行。

    496 引用 • 934 回帖 • 1 关注
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    151 引用 • 257 回帖
  • jQuery

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

    63 引用 • 134 回帖 • 733 关注
  • V2Ray
    1 引用 • 15 回帖 • 1 关注
  • LaTeX

    LaTeX(音译“拉泰赫”)是一种基于 ΤΕΧ 的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在 20 世纪 80 年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 59 回帖 • 3 关注
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    201 引用 • 120 回帖
  • 书籍

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

    80 引用 • 396 回帖
  • TGIF

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

    291 引用 • 4495 回帖 • 661 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和,范畴较广,一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    229 引用 • 1432 回帖 • 1 关注
  • 外包

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

    26 引用 • 233 回帖 • 2 关注
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 764 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 34 关注
  • frp

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

    17 引用 • 7 回帖 • 3 关注
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。

    2 引用 • 97 关注
  • 代码片段

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

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

    177 引用 • 1257 回帖
  • Python

    Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。

    554 引用 • 675 回帖
  • 单点登录

    单点登录(Single Sign On)是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖 • 3 关注
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器,在 1999 年被捐献给 ASF(Apache Software Foundation),隶属于 Jakarta 项目,现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范,同时也提供 HTTP 服务,是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 4 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    411 引用 • 3588 回帖
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    16 引用 • 236 回帖 • 254 关注
  • PWA

    PWA(Progressive Web App)是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术,在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 183 关注