希望可以折叠代码
能否写一个代码片段来折叠过长的代码,例如 CSDN 的代码 😄
希望可以折叠代码
能否写一个代码片段来折叠过长的代码,例如 CSDN 的代码 😄
思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。
融合块、大纲和双向链接,重构你的思维。
代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。
用户在该标签下分享代码片段时需在帖子标题前添加 [css]
或 [js]
用于区分代码片段类型。
提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。
我在 @JeffreyChen 的基础上,增加了 js 代码,不知是否是你想要的效果。
亮色主题样式
暗色主题样式
js 代码如下 (仅需把下面代码放到 js 片段即可,代码中已含 css)
参数说明:
const codeMaxHeight = 300,当代码块内容高度超出多少像素是折叠,注意:这里的高度是指.hljs 元素的高度,默认是 300px
对所有代码块生效,数值可以自己改:
/* 代码块限制最大高度 CSS片段 */
div:not(#preview) > .protyle-wysiwyg .code-block .hljs {
max-height: 800px;
}
我在 @JeffreyChen 的基础上,增加了 js 代码,不知是否是你想要的效果。
亮色主题样式
暗色主题样式
js 代码如下 (仅需把下面代码放到 js 片段即可,代码中已含 css)
参数说明:
const codeMaxHeight = 300,当代码块内容高度超出多少像素是折叠,注意:这里的高度是指.hljs 元素的高度,默认是 300px
我有一个 59 个代码块的文档,好像并没有生效,只是可以滑动,那个展开的按钮好像并没有出现
抱歉,我这边无法重现。
首先,在新空间尝试测试问题数及新数据,确保不是因为某些原因或缓存等造成影响导致意外。
如果仍未解决,请参考 [js] 折叠代码块 - wilsons 的回帖 这里的回复
另外,提醒下,思源代码片段,修改代码中后建议重启思源,否则系统中可能存在多份代码相互影响。
已修复,请用新代码测试。
这个 bug 是当思源块有用户自定义 dom 时,提交块内容时,自定义 dom 被当做块内容的一部分被提交,代码块这里便当做了代码的一部分被提交。
本次修改采用拦截思源块提交 api,并在提交前过滤自定义 dom 的临时解决方案。
相关 bug 已提交思源官方:Issue #12684 · siyuan-note/siyuan
还是有些 bug,复现如下:
<script>alert("xss");</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。
你若安好,便是晴天。
WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。
开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。
Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.
“梦想从学习开始,事业从实践起步” —— 习近平
Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。
你听到信仰的声音了么?
Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。
这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!
宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”
安全永远都不是一个小问题。
HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。
脑图又叫思维导图,是表达发散性思维的有效图形思维工具 ,它简单却又很有效,是一种实用性的思维工具。
程序员是从事程序开发、程序维护的专业人员。
黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。
A second brain, for you, forever.
我来 wolai:不仅仅是未来的云端笔记!
jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。
Spring 是一个开源框架,是于 2003 年兴起的一个轻量级的 Java 开发框架,由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构,分层架构允许使用者选择使用哪一个组件,同时为 JavaEE 应用程序开发提供集成的框架。
资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。
CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。
SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。
前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。
Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。
Communication channel for makers and users.
Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。