登录 注册

[js] 代码块优化之折叠 / 展开 / 全屏 / 悬浮横向滚动条

最近写 runjs 发现代码块编辑时有诸多不便，于是稍微优化了下。

功能说明

  1. 在代码块的右上角添加展开/折叠和全屏按钮
  2. 当代码块滚动时，在页面的底部自动悬浮横向滚动条（0.0.4 及之后版本仅代码块有横向滚动条且高度大于指定的最大高度时才显示）
  3. 代码块顶部导航滚动时自动吸附至顶部
  4. 不支持手机版（因为不需要）

使用说明

测试 3.1.10 和 3.1.27 及 web 版正常，其他兼容性未知。

代码

https://gitee.com/wish163/mysoft/blob/main/%E6%80%9D%E6%BA%90/%E4%BB%A3%E7%A0%81%E5%9D%97%E4%BC%98%E5%8C%96%E4%B9%8B%E6%8A%98%E5%8F%A0%E5%85%A8%E5%B1%8F%E5%92%8C%E6%A8%AA%E5%90%91%E6%BB%9A%E5%8A%A8%E6%9D%A1.js

效果

image.png

image.png

【鸣谢】

感谢 @JeffreyChen 大佬提供的全屏 css 代码！

【免责声明】

请仔细测试后谨慎使用，使用前请做好备份工作，由此带来的任何后果自负！！！均与作者及代码无关！！！

打赏作者

image.png

  • 思源笔记

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

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

    25112 引用 • 103536 回帖 • 1 关注
  • 代码片段

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

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

    141 引用 • 948 回帖 • 2 关注
2 操作
wilsons 在 2025-04-12 11:31:21 更新了该帖
wilsons 在 2025-04-11 20:28:01 更新了该帖
4 感谢
5 收藏
2 操作
12 回帖
6
2
2
213 127 4 82

相关帖子

12 回帖
[js] 代码块优化之折叠 / 展开 / 全屏 / 悬浮横向滚动条

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • wilsons •
    付费者 捐赠者 作者

    @zxkmm 关于横向滚动条，一开始打算用你的插件，发现不支持代码块，有没有计划新增其他块？最好能自定义哪些块。

    我这个仅仅支持代码块，不通用。

    1 回复
  • zxkmm • • 1 • 1 评论
    付费者 支持者 捐赠者

    最近在写别的东西，暂时不太有空，但是原则上选择器选一下就能用。如果有兴趣的话可以告诉我你的 github 然后我拉你到代码库。

    https://github.com/wish5115/
    wilsons •
  • wilsons •
    付费者 捐赠者 作者

    极致优化

    0.0.2 美化滚动条样式image.png
    0.0.3 修复全屏后代码块显示不全问题
    0.0.4 改进仅代码有滚动条且高度大于 codeMaxHeight 时才显示

  • lichlaughing • • 1 评论 via macOS
    订阅者

    如果一片文章代码块很多，使用这个 js，页面就会变的非常的卡 😂

    1 回复
    行号问题，如果是上百行代码全屏然后选中修改，得卡好一会才有反应
    siyuan100861186 •
  • wilsons •
    付费者 捐赠者 作者

    你确定是这个 js 的问题吗？有没有排除过其他可能影响的因素。

    如果你确定的话，可否把你的文档发来看看。如果不方便也可以发私信。

    我这边测试 4 万字的文章，很多代码块没影响。

    1 回复
  • lichlaughing • via macOS
    订阅者

    我有试了下 ，不是 js 的问题 👍 。 去掉 js 后也是很卡，那应该其他什么东西影响了。

    2 回复
  • wilsons •
    付费者 捐赠者 作者

    OK

  • JeffreyChen •
    付费者 支持者 捐赠者

    是不是代码块开启了行号、选择了语言，这样会有点卡

  • Muu •
    付费者

    有的时候就有那个 箭头 有的时候就没有, 这个有什么规则么

    PixPin20250414165308.gif

    图片.png

    1 回复
  • wilsons •
    付费者 捐赠者 作者

    不好意思我重现不了你的问题

    1 确保代码是最新版

    2 新空间测试以排除可能的干扰项

    3 提供思源版本及详细重现步骤

    4 最好提供有问题的测试文档

    1 回复
  • Muu •
    付费者
    1. 昨天当时的最新版 (0.0.4)
    2. 新空间, 仅改颜色主题为暗色
    3. 3.1.27 复现步骤如 gif
      1. 新建个文档
      2. 用三个点创建代码块
      3. 看下 protyle-action 里面有时候就没有那个折叠展开的哪个按钮
    4. 测试文档是啥?
    5. 参数如下图片.png
    1 回复
    1 操作
    Muu 在 2025-04-15 10:36:32 更新了该回帖
  • wilsons •
    付费者 捐赠者 作者

    已修复

请输入回帖内容 ...
wilsons
人生最大的敌人是自己，战胜自己，才能超越一切。
回帖
1254
 帖子
49
 积分
40678

近期热议

推荐标签 标签

  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展，它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器，可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API，可通过 DOM，CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 488 关注
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织，“用爱发电”象征开源与贡献精神，加入组织，代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入：用爱发电组织邀请帖。
    用爱发电组织官网：https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力：

    • 遵守开源守则，体现开源&贡献精神：以分享为目的，拒绝非法牟利。
    • 自我保护：使用适当的 License 保护自己的原创作品。
    • 尊重他人：不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露；以礼相待，尊重所有对社区做出贡献的开发者；通过他人的分享习得知识，要留下足迹，表示感谢。
    • 热爱编程、热爱学习：加入组织，热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友，也同样欢迎默默成就的朋友。
    • 倾听：正确并恳切对待、处理问题与建议，及时修复开源项目的 Bug ，及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视：不诋毁、轻视、嘲讽其他开发者，主动提出建议、施以帮助，以和谐为本。只要他人肯努力，你也可能会被昔日小看的人所超越，所以请保持谦虚。
    • 乐观且活跃：你的努力决定了你的高度。不要放弃，多年后回头俯瞰，才会发现自己已经成就往日所仰望的水平。积极地将项目开源，帮助他人学习、改进，自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖 • 2 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 827 关注
  • 宕机

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

    13 引用 • 82 回帖 • 77 关注
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台，同时可以将自己看到的精彩内容分享到微信朋友圈。

    133 引用 • 796 回帖
  • JRebel

    JRebel 是一款 Java 虚拟机插件，它使得 Java 程序员能在不进行重部署的情况下，即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 678 关注
  • 导航

    各种网址链接、内容导航。

    43 引用 • 177 回帖
  • Typecho

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

    12 引用 • 67 回帖 • 447 关注
  • Office

    Office 现已更名为 Microsoft 365. Microsoft 365 将高级 Office 应用（如 Word、Excel 和 PowerPoint）与 1 TB 的 OneDrive 云存储空间、高级安全性等结合在一起，可帮助你在任何设备上完成操作。

    5 引用 • 34 回帖 • 1 关注
  • 面试

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

    325 引用 • 1395 回帖
  • flomo

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

    6 引用 • 141 回帖 • 2 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统，实现一个自托管的 Git 项目仓库，可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖 • 2 关注
  • 旅游

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

    95 引用 • 901 回帖
  • SMTP

    SMTP（Simple Mail Transfer Protocol）即简单邮件传输协议，它是一组用于由源地址到目的地址传送邮件的规则，由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇，它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 634 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎，它支持自动化部署、大规模可伸缩、应用容器化管理。

    116 引用 • 54 回帖 • 3 关注
  • 以太坊

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

    34 引用 • 367 回帖 • 4 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图（data flow graphs），用于数值计算的开源软件库。节点（Nodes）在图中表示数学操作，图中的线（edges）则表示在节点间相互联系的多维数据数组，即张量（tensor）。

    20 引用 • 19 回帖 • 1 关注
  • 星云链

    星云链是一个开源公链，业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎，一个公链的所有功能，它基本都有，比如你可以用它来开发部署你的去中心化的 APP，你可以在上面编写智能合约，发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 1 关注
  • CongSec

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

    1 引用 • 1 回帖 • 28 关注
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • Q&A

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

    9577 引用 • 43573 回帖 • 97 关注
  • 运维

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

    151 引用 • 257 回帖 • 2 关注
  • jQuery

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

    63 引用 • 134 回帖 • 734 关注
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”，在线用户由 1999 年的 2 人（马化腾和张志东）到现在已经发展到上亿用户了，在线人数超过一亿，是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现，服务器端用 Erlang 语言编写，支持多种语言客户端，如：Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息，在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 341 关注

最新标签