修改备注弹窗的字体, 字号, 窗口大小

image.png

请问如何修改默认的备注弹窗的字体,字号,窗口大小, 原来的字体太小, 太费眼睛了, 感谢感谢!

  • 思源笔记

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

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

    26186 引用 • 108796 回帖 • 1 关注
  • Q&A

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

    10061 引用 • 45724 回帖 • 67 关注

相关帖子

被采纳的回答
  • wilsons 1

    css 改不了,需要 js 修改

    image.png

    代码

    // 修改备注的样式 { // 这里设置样式即可 const styles = { width: '400px', // 窗口宽,严格意义上是输入框的宽高,修改这个会自动让窗口变化 height: '200px', // 窗口高,同上 fontSize: '18px', // 字体大小 lineHeight: '180%', // 行间距 color: '#ff0000', // 文字颜色,不修改把折行删除或注释即可 fontFamily: '"中華民國字體", var(--b3-font-family-protyle)', // 字体,修改第一个双引号里的内容即可 }; observerProtyleUtil((util)=>{ const isMemo = util.querySelector('.fn__flex-1.resize__move')?.textContent?.trim() === window.siyuan.languages.memo; if(!isMemo) return; const textarea = util.querySelector('textarea'); if(!textarea) return; Object.assign(textarea.style, styles); }); function observerProtyleUtil(callback) { let hasEmit = false; // 1. 创建 MutationObserver 实例 const observer = new MutationObserver((mutationsList) => { mutationsList.forEach((mutation) => { // 2. 获取目标元素 const targetElement = mutation.target; // 3. 检查目标元素是否是 .protyle .protyle-util if (targetElement.matches('.protyle .protyle-util')) { // 4. 检查 .fn__none 类是否被删除 if (!targetElement.classList.contains('fn__none')) { if(hasEmit) return; hasEmit = true; callback(targetElement); setTimeout(() => { hasEmit = false; }, 100); } } }); }); // 5. 配置并启动监听 observer.observe(document.querySelector('.layout__center, #editor')||document.body, { //childList: true, // 监控子节点的变化 attributes: true, // 监听属性变化 attributeFilter: ['class'], // 只监听 class 属性 subtree: true, // 监听所有后代元素 }); } }

    只需要修改 styles 参数里的样式即可。

欢迎来到这里!

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

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

    css 改不了,需要 js 修改

    image.png

    代码

    // 修改备注的样式 { // 这里设置样式即可 const styles = { width: '400px', // 窗口宽,严格意义上是输入框的宽高,修改这个会自动让窗口变化 height: '200px', // 窗口高,同上 fontSize: '18px', // 字体大小 lineHeight: '180%', // 行间距 color: '#ff0000', // 文字颜色,不修改把折行删除或注释即可 fontFamily: '"中華民國字體", var(--b3-font-family-protyle)', // 字体,修改第一个双引号里的内容即可 }; observerProtyleUtil((util)=>{ const isMemo = util.querySelector('.fn__flex-1.resize__move')?.textContent?.trim() === window.siyuan.languages.memo; if(!isMemo) return; const textarea = util.querySelector('textarea'); if(!textarea) return; Object.assign(textarea.style, styles); }); function observerProtyleUtil(callback) { let hasEmit = false; // 1. 创建 MutationObserver 实例 const observer = new MutationObserver((mutationsList) => { mutationsList.forEach((mutation) => { // 2. 获取目标元素 const targetElement = mutation.target; // 3. 检查目标元素是否是 .protyle .protyle-util if (targetElement.matches('.protyle .protyle-util')) { // 4. 检查 .fn__none 类是否被删除 if (!targetElement.classList.contains('fn__none')) { if(hasEmit) return; hasEmit = true; callback(targetElement); setTimeout(() => { hasEmit = false; }, 100); } } }); }); // 5. 配置并启动监听 observer.observe(document.querySelector('.layout__center, #editor')||document.body, { //childList: true, // 监控子节点的变化 attributes: true, // 监听属性变化 attributeFilter: ['class'], // 只监听 class 属性 subtree: true, // 监听所有后代元素 }); } }

    只需要修改 styles 参数里的样式即可。

    1 回复
  • 其他回帖
  • 你从哪复制的代码?为什么代码都缩到一块了。

    都报错了,肯定没用了。

    先复制正常的代码再试。

  • liukuankuo

    就像 notion 里面,添加的评论也可以标注不同的颜色
    image.png

  • liukuankuo

    搞定了,感谢哈。是我复制代码错了。我是用鼠标去选的文本。 没看到右上角有一个代码复制的按钮。
    这个备注修改颜色的功能,也不是我想要的。我以为是能够把不同的文字修改不同的颜色呢。至少两种颜色吧,非重点是白的,重点的是红色。 能实现这种功能吗?❤️

  • 查看全部回帖

推荐标签 标签

  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 179 关注
  • GitLab

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

    46 引用 • 72 回帖
  • 友情链接

    确认过眼神后的灵魂连接,站在链在!

    24 引用 • 373 回帖
  • Pipe

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

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

    134 引用 • 1127 回帖 • 110 关注
  • jsoup

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

    6 引用 • 1 回帖 • 497 关注
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖
  • 程序员

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

    591 引用 • 3528 回帖
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    89 引用 • 113 回帖
  • CentOS

    CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码,因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    240 引用 • 224 回帖
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 109 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和,范畴较广,一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1432 回帖 • 1 关注
  • 架构

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

    142 引用 • 442 回帖
  • 小说

    小说是以刻画人物形象为中心,通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    32 引用 • 108 回帖 • 5 关注
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。

    7 引用 • 31 回帖 • 263 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖
  • abitmean

    有点意思就行了

    36 关注
  • Spring

    Spring 是一个开源框架,是于 2003 年兴起的一个轻量级的 Java 开发框架,由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构,分层架构允许使用者选择使用哪一个组件,同时为 JavaEE 应用程序开发提供集成的框架。

    947 引用 • 1460 回帖 • 2 关注
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖 • 4 关注
  • Sillot

    Insights(注意当前设置 master 为默认分支)

    汐洛彖夲肜矩阵(Sillot T☳Converbenk Matrix),致力于服务智慧新彖乄,具有彖乄驱动、极致优雅、开发者友好的特点。其中汐洛绞架(Sillot-Gibbet)基于自思源笔记(siyuan-note),前身是思源笔记汐洛版(更早是思源笔记汐洛分支),是智慧新录乄终端(多端融合,移动端优先)。

    主仓库地址:Hi-Windom/Sillot

    文档地址:sillot.db.sc.cn

    注意事项:

    1. ⚠️ 汐洛仍在早期开发阶段,尚不稳定
    2. ⚠️ 汐洛并非面向普通用户设计,使用前请了解风险
    3. ⚠️ 汐洛绞架基于思源笔记,开发者尽最大努力与思源笔记保持兼容,但无法实现 100% 兼容
    29 引用 • 25 回帖 • 130 关注
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖
  • 博客

    记录并分享人生的经历。

    273 引用 • 2389 回帖
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 3 关注
  • Visio
    1 引用 • 2 回帖
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    284 引用 • 248 回帖 • 3 关注
  • 微软

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

    8 引用 • 44 回帖 • 2 关注
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 678 关注
  • 创业

    你比 99% 的人都优秀么?

    82 引用 • 1395 回帖