登录 注册

[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

  • 思源笔记

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

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

    25248 引用 • 104161 回帖
  • 代码片段

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

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

    152 引用 • 991 回帖 • 2 关注
2 操作
wilsons 在 2025-04-12 11:31:21 更新了该帖
wilsons 在 2025-04-11 20:28:01 更新了该帖
4 感谢
5 收藏
2 操作
12 回帖
6
2
2
255 136 10 109

相关帖子

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

欢迎来到这里！

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

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

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

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

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

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

    wish5115 - Overview wish5115 has 67 repositories available. Follow their code on GitHub. GitHub - github.com
    wilsons •
  • wilsons •
    付费者 捐赠者 作者

    极致优化

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

  • lichlaughing • • 1 评论
    订阅者

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

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

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

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

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

    1 回复
  • lichlaughing •
    订阅者

    我有试了下 ，不是 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
人生最大的敌人是自己，战胜自己，才能超越一切。
回帖
1296
 帖子
55
 积分
42117

近期热议

推荐标签 标签

  • Swagger

    Swagger 是一款非常流行的 API 开发工具，它遵循 OpenAPI Specification（这是一种通用的、和编程语言无关的 API 描述规范）。Swagger 贯穿整个 API 生命周期，如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 1 关注
  • 程序员

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

    588 引用 • 3538 回帖
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。

    89 引用 • 122 回帖 • 616 关注
  • GitLab

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

    46 引用 • 72 回帖 • 2 关注
  • V2Ray
    1 引用 • 15 回帖 • 3 关注
  • C++

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

    107 引用 • 153 回帖 • 2 关注
  • Tomcat

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

    162 引用 • 529 回帖 • 7 关注
  • 黑曜石

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

    A second brain, for you, forever.

    22 引用 • 214 回帖 • 1 关注
  • Electron

    Electron 基于 Chromium 和 Node.js，让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目，兼容 Mac、Windows 和 Linux，它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 1 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态；标准是由主流手机厂商组成的快应用联盟联合制定；快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台；以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 1 关注
  • App

    App（应用程序，Application 的缩写）一般指手机软件。

    91 引用 • 384 回帖
  • Quicker

    Quicker 您的指尖工具箱！操作更少，收获更多！

    37 引用 • 157 回帖 • 1 关注
  • 服务器

    服务器，也称伺服器，是提供计算服务的设备。由于服务器需要响应服务请求，并进行处理，因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 585 回帖
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器，详细介绍请看 将 Java Swing 应用变成 Web 应用 。

    1 引用 • 15 回帖 • 641 关注
  • B3log

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

    1063 引用 • 3455 回帖 • 161 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统，由瑞典 MySQL AB 公司开发，目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    693 引用 • 537 回帖
  • 导航

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

    43 引用 • 177 回帖
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架，它对 JDBC 进行了非常轻量级的对象封装，使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 726 关注
  • 心情

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

    59 引用 • 369 回帖 • 3 关注
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 460 关注
  • 叶归
    5 引用 • 16 回帖 • 11 关注
  • Swift

    Swift 是苹果于 2014 年 WWDC（苹果开发者大会）发布的开发语言，可与 Objective-C 共同运行于 Mac OS 和 iOS 平台，用于搭建基于苹果平台的应用程序。

    36 引用 • 37 回帖 • 545 关注
  • uTools

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

    7 引用 • 27 回帖
  • RemNote
    2 引用 • 16 回帖 • 7 关注
  • Q&A

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

    9649 引用 • 43886 回帖 • 93 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架，使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用，例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 34 关注
  • OneDrive
    2 引用 • 1 关注

最新标签