登录 注册

[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

  • 思源笔记

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

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

    25744 引用 • 106536 回帖 • 1 关注
  • 代码片段

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

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

    173 引用 • 1207 回帖 • 1 关注
3 引用
[js] 全屏和宽屏 • wilsons
[js] 代码块之缩进格式化粘贴 • wilsons
[js] 代码块自动缩进及 ctrl+/ 添加注释 • wilsons
3 操作
wilsons 在 2025-05-07 08:30:26 更新了该帖
wilsons 在 2025-04-12 11:31:21 更新了该帖
wilsons 在 2025-04-11 20:28:01 更新了该帖
4 感谢
6 收藏
3 引用
3 操作
13 回帖
7
2
2
357 169 34 154

相关帖子

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

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • Muu •
    付费者

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

    PixPin20250414165308.gif

    图片.png

    1 回复
  • 其他回帖
  • lichlaughing • via macOS
    订阅者

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

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

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

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

    我这边测试 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 工具箱中 🛠️ 目前已正式入驻爱发电啦！💖 想催更、提需求？欢迎访问 👉 https://afdian.com/a/wilsons
回帖
1456
 帖子
65
 积分
47699

近期热议

推荐标签 标签

  • 强迫症

    强迫症（OCD）属于焦虑障碍的一种类型，是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病，其特点为有意识的强迫和反强迫并存，一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖 • 2 关注
  • 自由行
    • 1 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本，现在仍处于发展阶段。广义论及 HTML5 时，实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    108 引用 • 295 回帖
  • frp

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

    17 引用 • 7 回帖 • 2 关注
  • flomo

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

    6 引用 • 143 回帖
  • Webswing

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

    1 引用 • 15 回帖 • 637 关注
  • wolai

    我来 wolai：不仅仅是未来的云端笔记！

    2 引用 • 14 回帖 • 6 关注
  • Solo

    Solo 是一款小而美的开源博客系统，专为程序员设计。Solo 有着非常活跃的社区，可将文章作为帖子推送到社区，来自社区的回帖将作为博客评论进行联动（具体细节请浏览 B3log 构思 - 分布式社区网络）。

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

    1441 引用 • 10069 回帖 • 493 关注
  • uTools

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

    7 引用 • 27 回帖
  • 深度学习

    深度学习（Deep Learning）是机器学习的分支，是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    43 引用 • 44 回帖
  • 阿里巴巴

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

    43 引用 • 221 回帖 • 57 关注
  • Kubernetes

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

    118 引用 • 54 回帖
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    345 引用 • 749 回帖
  • 链滴

    链滴是一个记录生活的地方。

    记录生活，连接点滴

    178 引用 • 3866 回帖 • 1 关注
  • AngularJS

    AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 512 关注
  • GitHub

    GitHub 于 2008 年上线，目前，除了 Git 代码仓库托管及基本的 Web 管理界面以外，还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱（报表）、代码片段分享（Gist）等功能。正因为这些功能所提供的便利，又经过长期的积累，GitHub 的用户活跃度很高，在开源世界里享有深远的声望，并形成了社交化编程文化（Social Coding）。

    209 引用 • 2040 回帖
  • WordPress

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

    45 引用 • 114 回帖 • 180 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件，最早由德国 Innotek 公司开发，由 Sun Microsystems 公司出品的软件，使用 Qt 编写，在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 18 关注
  • JRebel

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

    26 引用 • 78 回帖 • 676 关注
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统，是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议，并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想，是一个性能稳定的多用户网络操作系统。

    954 引用 • 944 回帖
  • TGIF

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

    291 引用 • 4495 回帖 • 656 关注
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖
  • DNSPod

    DNSPod 建立于 2006 年 3 月份，是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析，让电信用户访问电信的服务器，网通的用户访问网通的服务器，教育网的用户访问教育网的服务器，达到互联互通的效果。

    6 引用 • 26 回帖 • 533 关注
  • 微软

    微软是一家美国跨国科技公司，也是世界 PC 软件开发的先导，由比尔·盖茨与保罗·艾伦创办于 1975 年，公司总部设立在华盛顿州的雷德蒙德（Redmond，邻近西雅图）。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架，使用 Node.js 编写。

    22 引用 • 148 回帖 • 9 关注
  • 导航

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

    44 引用 • 177 回帖
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖

最新标签