[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

  • 思源笔记

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

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

    25753 引用 • 106576 回帖
  • 代码片段

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

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

    174 引用 • 1212 回帖 • 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

推荐标签 标签

  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1063 引用 • 3455 回帖 • 151 关注
  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    52 引用 • 190 回帖
  • Tomcat

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

    162 引用 • 529 回帖 • 1 关注
  • 学习

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

    172 引用 • 534 回帖
  • ngrok

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 652 关注
  • 微服务

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

    96 引用 • 155 回帖 • 1 关注
  • CAP

    CAP 指的是在一个分布式系统中, Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性),三者不可兼得。

    12 引用 • 5 回帖 • 634 关注
  • Access
    1 引用 • 3 回帖 • 2 关注
  • 心情

    心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。

    59 引用 • 369 回帖
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    63 引用 • 289 回帖
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 641 关注
  • jQuery

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

    63 引用 • 134 回帖 • 732 关注
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    77 引用 • 37 回帖
  • gRpc
    11 引用 • 9 回帖 • 94 关注
  • Pipe

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

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

    134 引用 • 1127 回帖 • 108 关注
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    7 引用 • 69 回帖 • 7 关注
  • 单点登录

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

    9 引用 • 25 回帖 • 5 关注
  • Office

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

    5 引用 • 34 回帖
  • 人工智能

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

    113 引用 • 315 回帖
  • InfluxDB

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

    2 引用 • 97 关注
  • JVM

    JVM(Java Virtual Machine)Java 虚拟机是一个微型操作系统,有自己的硬件构架体系,还有相应的指令系统。能够识别 Java 独特的 .class 文件(字节码),能够将这些文件中的信息读取出来,使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖 • 1 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 394 关注
  • 尊园地产

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

    1 引用 • 22 回帖 • 794 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖
  • Oracle

    Oracle(甲骨文)公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年,甲骨文已超越 IBM,成为继 Microsoft 后全球第二大软件公司。

    107 引用 • 127 回帖 • 338 关注
  • CodeMirror
    2 引用 • 17 回帖 • 164 关注