行内代码过长时奇怪的断行渲染方式

如题,见下图,默认主题。

图片.png

  • 思源笔记

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

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

    20644 引用 • 80672 回帖 • 1 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • Achuan-2 1 赞同 2 评论

    这个是正好行内代码就在行末尾导致的的吧,应该情况比较少,大家遇到的残留零宽字符更多是在句子中间就被 break word 打断了,非常突兀。我觉得行内代码主要用来标记代码和路径以及数字、字符串,而不是一个长段落,被打断对我而言无所谓,我也更倾向于渲染效果比较规整的结果,一行只有一半就自动换行反而是一件更受不了的事情。如果行内代码的内容没有空格的话,break word 一般都是把整体看成一个单词的,导致过长就直接分行了。

    语雀貌似不会有这个问题,不知道怎么实现的。此外语雀的行内代码就是用的 break all,我把它改成 break word,昨天测试的时候并没有发现残留零宽字符

    1 回复
    1 操作
    Achuan-2 在 2024-04-28 14:16:04 更新了该回帖
    楼主中的图片和 issue 中说的应该是残留问题,这个调整编辑器宽度应该可以重现。代码里面大部分都是英文,截断感觉会影响阅读。
    Vanessa
    @Vanessa 截断这个看个人喜好了,就不多说了。语雀那个机制 V 姐有研究过吗,我又测试了下,发现确实看不到语雀有思源这种问题,即使把 break-all 改成 break word。语雀也是支持直接在行内代码开头补充内容的
    Achuan-2
  • 其他回帖
  • 大佬牛批,感谢大佬!

    感觉改零宽字符是个办法。


    我发现在设置里面把两侧对齐打开就会好一些,也可以避免行内代码截断(缺点就是字少的时候一行会很稀疏)。另外就是会有一点背景残留,但是改为 @Achuan-2 说的那种零宽字符后,就不会有残留了,确实是个可行的办法。

    图片.png

    1 回复
    1 操作
    3Woods 在 2024-04-28 23:43:13 更新了该回帖
  • Achuan-2 2 2 赞同

    默认主题

    Clip20240427221711.png

    Clip20240427223251.png

    自定义代码

    .b3-typography code:not(.hljs),
    .b3-typography span[data-type~='code'],
    .protyle-wysiwyg code:not(.hljs),
    .protyle-wysiwyg span[data-type~='code'] {
    
        word-break: break-all;
    
    }
    

    Clip20240427221756.png

    Clip20240427223315.png

    @88250 用 word-break: break-all;就能解决这个问题,只不过不会按单词分割,但是我觉得行内代码本身就有底纹,不按单词分割也没什么,是可以明确知道上一行和下一行有没有空格的,不会造成歧义,我自己使用过程中没发现过有所影响。类似的还有超链接。

    正文要 break-word 我能理解,但像这种特殊样式,本身就可以靠格式独立出来,break-all 的体验更好其实,我自己用的 Tsundoku 主题就一直用的 break-all。

    break-word 反而有时候会莫名奇妙的分行看的还不舒服。因为本身 inline-code、inline-hyperlink,就是行内元素,预期用户输入的就是单行文字,反而因为 break-word 被分割渲染看起来变成了多行。另外,break-word 也不能保证一定按单词分割,行内代码除了代码之外,另一个广泛的用法就是放路径了,对于一般没有空格的长路径,可是直接识别成一个单词的,这时候效果就会很不好,直接前面断了一行。(notion 之类的是不支持直接编辑行内代码左侧,所以问题不太大,而语雀用的就是 break-all)

    Clip20240427231256.png

    虽然主题\自定义代码可以做到,不过建议官方考虑一下能否采用这种方案,我是觉得适用于大多数人的,不至于让普通用户困惑。其他用户如果不喜欢 break-all,也可以自定义代码实现 break-word

    3 回复
    5 操作
    Achuan-2 在 2024-04-27 23:18:32 更新了该回帖
    Achuan-2 在 2024-04-27 23:14:23 更新了该回帖
    Achuan-2 在 2024-04-27 22:42:46 更新了该回帖
    Achuan-2 在 2024-04-27 22:33:30 更新了该回帖 Achuan-2 在 2024-04-27 22:29:28 更新了该回帖
  • Achuan-2 1 1 赞同 3 评论

    我看了下语雀的 DOM 结构,发现语雀的零宽字符是单独用 span 标签包裹的

    image.png

    而使用的零宽字符直接就放在了内容的最左侧

    估计是这个原因,break-word 识别零宽字符是一个单词,后面的长字符串为一个单词,然后就被分割了。不知道思源有没有办法改进下。

    Clip20240428221652.png

    我发现估计是使用的零宽字符的缘故,V 姐试试改用语雀的那种零宽字符,我直接在 DOM 改零宽字符貌似就没有出现残留了!

    @Vanessa

    修改语雀 DOM 用思源的零宽字符,也会出现这个问题

    Clip20240428223517.png

    思源改之前

    Clip20240428223912.png

    改之后

    Clip20240428224011.png

    确实就不会在上一行残留一点点背景了,但是貌似发现了一个缺点——下一行好像会多一个字,语雀由于是 break-all 就没有这个问题

    1 回复
    DOM 结构改不了了。
    Vanessa
    @Vanessa 零宽字符能改吗 我的意思是改成语雀的零宽字符
    Achuan-2
    @Achuan-2 可以改的,但是用的地方比较多,还需要看其他地方有没有问题。我先建个 issue Issue #11248 · siyuan-note/siyuan
    Vanessa
  • 查看全部回帖

推荐标签 标签

  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    76 引用 • 429 回帖 • 5 关注
  • Netty

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

    49 引用 • 33 回帖 • 21 关注
  • 思源笔记

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

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

    20643 引用 • 80672 回帖 • 1 关注
  • MongoDB

    MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    17 引用 • 236 回帖 • 371 关注
  • OpenResty

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

    17 引用 • 45 关注
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    14 引用 • 7 回帖
  • Webswing

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

    1 引用 • 15 回帖 • 621 关注
  • PostgreSQL

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

    22 引用 • 22 回帖
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖 • 3 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    405 引用 • 3557 回帖
  • CAP

    CAP 指的是在一个分布式系统中, Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性),三者不可兼得。

    11 引用 • 5 回帖 • 590 关注
  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    6 引用 • 15 回帖 • 169 关注
  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 8 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 606 关注
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    90 引用 • 383 回帖
  • 倾城之链
    23 引用 • 66 回帖 • 125 关注
  • CentOS

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

    238 引用 • 224 回帖 • 2 关注
  • FreeMarker

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

    23 引用 • 20 回帖 • 444 关注
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    83 引用 • 165 回帖 • 3 关注
  • danl
    98 关注
  • Flume

    Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 616 关注
  • 分享

    有什么新发现就分享给大家吧!

    246 引用 • 1780 回帖
  • HTML

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

    103 引用 • 294 回帖
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 42 关注
  • OpenShift

    红帽提供的 PaaS 云,支持多种编程语言,为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 617 关注
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    5 引用 • 62 回帖 • 10 关注