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

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

功能说明

  1. 在代码块的右上角添加展开/折叠和全屏按钮
  2. 当代码块滚动时,在页面的底部自动悬浮横向滚动条(0.0.4 及之后版本仅代码块有横向滚动条且高度大于指定的最大高度时才显示)
  3. 预览,可以预览 JavaScript 和 HTML 代码,目前不支持其他语言预览。
  4. 代码块顶部导航滚动时自动吸附至顶部
  5. 不支持手机版(因为不需要)

使用说明

测试 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

【鸣谢】

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

【免责声明】

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

打赏作者

image.png

  • 思源笔记

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

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

    25764 引用 • 106649 回帖
  • 代码片段

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

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

    174 引用 • 1218 回帖 • 4 关注
3 操作
wilsons 在 2025-05-07 08:30:26 更新了该帖
wilsons 在 2025-04-12 11:31:21 更新了该帖
wilsons 在 2025-04-11 20:28:01 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • wilsons

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

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

    1 回复
  • zxkmm 1 1 评论

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

  • 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

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

  • 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

    0.0.6 增加预览功能,仅支持 html 和 js

请输入回帖内容 ...
wilsons
正在努力开发 wilsons 工具箱中 🛠️ 目前已正式入驻爱发电啦!💖 想催更、提需求?欢迎访问 👉 https://afdian.com/a/wilsons

推荐标签 标签

  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    48 引用 • 206 回帖 • 283 关注
  • WordPress

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

    45 引用 • 114 回帖 • 180 关注
  • 分享

    有什么新发现就分享给大家吧!

    248 引用 • 1794 回帖 • 7 关注
  • 前端

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

    246 引用 • 1338 回帖
  • jsoup

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

    6 引用 • 1 回帖 • 487 关注
  • SSL

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

    70 引用 • 193 回帖 • 415 关注
  • Outlook
    1 引用 • 5 回帖 • 3 关注
  • 开源

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

    411 引用 • 3588 回帖
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖
  • 尊园地产

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

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

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

    1 引用 • 8 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件,打造你得心应手的工具集合。

    7 引用 • 27 回帖
  • Mobi.css

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

    1 引用 • 6 回帖 • 762 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    336 引用 • 324 回帖
  • 微服务

    微服务架构是一种架构模式,它提倡将单一应用划分成一组小的服务。服务之间互相协调,互相配合,为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建,能够被独立的部署。

    96 引用 • 155 回帖 • 2 关注
  • GAE

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

    14 引用 • 42 回帖 • 818 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 56 关注
  • PWA

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

    14 引用 • 69 回帖 • 183 关注
  • OnlyOffice
    4 引用 • 26 关注
  • 996
    13 引用 • 200 回帖 • 3 关注
  • 思源笔记

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

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

    25764 引用 • 106649 回帖
  • 人工智能

    人工智能(Artificial Intelligence)是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    113 引用 • 315 回帖 • 1 关注
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 52 关注
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    371 引用 • 1854 回帖 • 1 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4601 回帖 • 709 关注
  • 运维

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

    151 引用 • 257 回帖
  • LaTeX

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

    12 引用 • 59 回帖 • 5 关注