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

本贴最后更新于 239 天前,其中的信息可能已经事过景迁

image.png

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

  • 思源笔记

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

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

    28447 引用 • 119791 回帖
  • Q&A

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

    11156 引用 • 50667 回帖 • 52 关注

相关帖子

被采纳的回答
  • wilsons 1

    css 改不了,需要 js 修改

    image.png

    代码

    // 修改备注的样式
    // 0.0.2 增加备注提示窗也应用和弹窗一样的样式
    {
        // 这里设置样式即可
        const styles = {
            width: '400px', // 窗口宽,严格意义上是输入框的宽高,修改这个会自动让窗口变化
            height: '200px', // 窗口高,同上
            fontSize: '18px', // 字体大小
            lineHeight: '180%', // 行间距
            color: '#ff0000', // 文字颜色,不修改把这行删除或注释即可
            fontFamily: '"中華民國字體", var(--b3-font-family-protyle)', // 字体,修改第一个双引号里的内容即可
        };
    
        // 是否把样式同样应用于备注的提示窗上 true 应用 false 不应用
        const isAlsoUseInMemoTips = false;
    
        // 备注的提示窗样式,默认与弹出框完全一样
        const memoTipsStyle = {
            ...styles, // 克隆弹窗样式
            width: '', // 提示窗的宽度,为空则使用备注提示默认宽度
            height: '', // 提示窗的高度,为空则使用备注提示默认高度
           maxWidth: 'none', // 最大宽度
            // 默认备注提示都是黑色,这里更改为根据主题显示不同
            backgroundColor: 'var(--b3-theme-background)',
            border: '1px solid #88888855', // 提示窗边框,颜色最后2位代表透明度,00完全透明 FF完全不透明
            padding: '10px', // 提示窗内边距
        };
      
        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);
        });
    
        if(isAlsoUseInMemoTips) {
            (document.querySelector('.layout__center, #editor')||document.body).addEventListener('mouseover', (e) => {
                const memo = e.target.closest('[data-type="inline-memo"]');
                if(!memo) return;
                setTimeout(()=>Object.assign(document.querySelector('#tooltip').style, memoTipsStyle), 50);
            });
        }
      
        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 参数里的样式即可。

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • aeqvkec
    作者

    可以了, 非常感谢 🙏 🙏

  • 其他回帖
  • wilsons 1 4 评论

    修改好了

    把 isAlsoUseInMemoTips 设为 true 即可,备注提示样式可在 memoTipsStyle 中修改,默认会继承编辑弹窗样式(宽高除外)。

    参数详情:

    image.png

    效果预览:

    image.png

    1 回复
    1 操作
    wilsons 在 2025-10-10 22:20:23 更新了该回帖
    错了个字:文字颜色,不修改把折行删除或注释即可。折(这行)
    8V9q7V
    @8V9q7V 👍 改了,输入法打错别字太正常了,有时输入太快,输入法联想不准就会出现,一般不是关键信息上,不影响理解都懒得改,哈哈
    wilsons
    怎么修改,鼠标划过时提示框的宽高呢
    8V9q7V
    @8V9q7V memoTipsStyle 参数里不是有宽高,现在是空,填上就好了,比如 400px
    wilsons 1
  • liukuankuo

    js 如何修改? 是按照下面图示改吗? 我改了,发现没有用
    image.png

    1 回复
  • liukuankuo

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

  • 查看全部回帖

推荐标签 标签

  • 服务器

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

    125 引用 • 585 回帖
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖 • 1 关注
  • Markdown

    Markdown 是一种轻量级标记语言,用户可使用纯文本编辑器来排版文档,最终通过 Markdown 引擎将文档转换为所需格式(比如 HTML、PDF 等)。

    173 引用 • 1559 回帖
  • 尊园地产

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

    1 引用 • 22 回帖 • 838 关注
  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 623 关注
  • 脑图

    脑图又叫思维导图,是表达发散性思维的有效图形思维工具 ,它简单却又很有效,是一种实用性的思维工具。

    40 引用 • 157 回帖
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    269 引用 • 666 回帖 • 1 关注
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis,2010 年这个项目由 Apache 软件基金会迁移到了 google code,并且改名为 MyBatis ,2013 年 11 月再次迁移到了 GitHub。

    174 引用 • 414 回帖 • 344 关注
  • Hadoop

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

    95 引用 • 122 回帖 • 634 关注
  • Swift

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

    34 引用 • 37 回帖 • 565 关注
  • 创业

    你比 99% 的人都优秀么?

    81 引用 • 1396 回帖
  • Hibernate

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

    39 引用 • 103 回帖 • 740 关注
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    76 引用 • 1746 回帖 • 10 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    48 引用 • 206 回帖 • 284 关注
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 51 关注
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    35 引用 • 468 回帖 • 768 关注
  • Kubernetes

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

    119 引用 • 54 回帖
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    54 引用 • 37 回帖
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 60 关注
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖 • 5 关注
  • Follow
    4 引用 • 13 回帖 • 19 关注
  • 支付宝

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

    29 引用 • 347 回帖 • 2 关注
  • uTools

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

    9 引用 • 75 回帖
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    89 引用 • 1251 回帖 • 376 关注
  • JWT

    JWT(JSON Web Token)是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准(RFC 7519),定义了一种简洁的,自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 27 关注
  • VirtualBox

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

    10 引用 • 2 回帖 • 15 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    200 引用 • 545 回帖 • 1 关注