彻底解决思源 3.1.4 代码块选择的问题

显示代码行的问题

3.1.4 之前代码选择就有问题,我曾经在这个帖子中解决了这个问题,今天兴冲冲的升级了新版。

以为官方解决了这个问题,但仔细测试下来发现还是有问题。

当鼠标移动到代码块之外时,未选择的代码突然被选中,见下图。

r32.gif

然后开启了我之前的解决方案,发现代码行有点错位,这不连夜修复了这个问题,使之适应 3.1.4 版本。

代码如下

/* 适用于3.1.4版本 */
/* 取消行号列占用的空间 */
.code-block:not([linenumber="false"]) .protyle-linenumber__rows {
    position: absolute;
    left: 0;
}
/* 当有行号时,代码块右移,给行号列让空间 */
.code-block:not([linenumber="false"]) .hljs {
    /* 为了适应当.hljs设置为最大高度时兼容代码行上下滚动 */
    position: relative;
    /* 与官方一致,兼容4位数字,即0-9999 */
    padding-left: 2.2em;
    /* 可兼容5位数字,即0-99999,请根据自己的喜好和实际情况修改 */
    /* padding-left: 2.7em; */
}

注意,这个版本仅适用于 3.1.4 版本。

旧版本请参考: 代码块功能优化建议 - wilsons 的回帖

最终效果如下,感觉舒服多了。

r33.gif

原理及使用说明

image.png

所以,有两种方案

  1. 与官方保持一致,测试下来能兼容 4 位数字,即 0-9999,效果同官方一致,见最上面的 2 张图片。

  2. 设为 2.7em,兼容 5 位数字,即 0-99999,但当小于 4 位数字时代码区域左边可能略显空旷,不过感觉还好。如下图所示

    image.png

  3. 具体怎么选择,请根据自己的喜好和实际情况修改。

不显示代码行的问题

3.1.4 之前的版本,好歹不开启代码行的时候选择没这个 bug,3.1.4 版本不开启代码行也有这个 bug。

针对不显示代码行的解决办法,最简单的方法就是始终开启代码行,然后如果你不想显示代码行用下面的 css 隐藏代码行即可。

.code-block:not([linenumber="false"]) .hljs {
    padding-left: 0;
}
.code-block:not([linenumber="false"]) .protyle-linenumber__rows {
    display: none;
}

也即是按照下图所示,1 处代码始终开启,2 处根据需要动态开启关闭即可。

image.png

最终效果

r34.gif

但这种方法,无法针对某一个代码块进行隐藏,如果你确实想针对某一个代码块进行隐藏,只能按照代码块 id 或命名啥的进行单独设置 css 了(单独显示代码块的原理也一样,不再赘述)。

比如

.code-block[id='xxxxxx']:not([linenumber="false"]) .hljs {
    padding-left: 0;
}
.code-block[id='xxxxxx']:not([linenumber="false"]) .protyle-linenumber__rows {
    display: none;
}

以上仅抛砖引玉,如果有更好的方案,还请各位大佬们不吝赐教!

最后,感谢 @JeffreyChen 大佬的帮助和提醒!感谢 @Vanessa 姐的提醒和回复!

  • 思源笔记

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

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

    22340 引用 • 89390 回帖 • 1 关注
4 操作
wilsons 在 2024-08-29 14:19:49 更新了该帖
wilsons 在 2024-08-29 07:44:40 更新了该帖
wilsons 在 2024-08-29 06:07:38 更新了该帖
wilsons 在 2024-08-29 06:02:58 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 改了一下数值让样式跟思源原生的完全一样:

    .code-block:not([linenumber="false"]) .protyle-linenumber__rows {
        position: absolute;
        left: 1.4em;
    }
    .code-block:not([linenumber="false"]) .hljs {
        margin-left: 1.8em;
    }
    

    在 1000 行以前样式都正常(还能把行号固定在左侧):

    image

    但超过 1000 行之后文本就会重叠:

    image

    关联 Issue #12354 · siyuan-note/siyuan

    1 回复
  • wilsons

    感谢大佬提醒!已更新。

  • wilsons 1 赞同 1 评论

    吐槽一下,这个代码选择问题之前 3.1.4 之前不开启代码行好歹还是好的,这咋还越改越倒退了呢?

    建议,官方推出预览版,预览版测试无误后再推出正式版,obsidian 就是这样,另外,制定发版计划,非紧急问题,不建议随便发版。

    稳定压倒一切,勿要让普通用户成为测试人员。

    @88250

    1 回复
    强烈同意!@88250
    pakeh2866
  • EmberSky

    你不先看下 issue 有没有关
    还好我没升级

    1 回复
  • 88250 1 1 赞同

    感谢反馈!

    另外可关注思源 GitHub 仓库,在每个正式版发布之前会陆续发布若干个开发版,欢迎下载测试。

    目前正常情况下(没有紧急缺陷时)思源的发版频率大致是 3 周左右,尽量保持稳定版对用户更友好一些。

    1 回复
  • wilsons

    哦哦,感谢老大的回复!

    原来思源已经做了 👍 ,建议最好把预览版发布到社区一下,这样可能有更多人知晓。

    尤其版本中包含某些用户关心的问题时,这样可能会有更多用户帮忙发布前的测试。

    1 回复
  • 88250

    开发版可能不太稳定,所以仅提供 GitHub 下载参与测试,谢谢。

    1 回复
  • wilsons

    👌

  • .hljs 上可能会设置 max-height 这样的话无法兼容竖向滚动条 Issue #10769 · siyuan-note/siyuan

    2 回复
  • wilsons

    @Vanessa 感谢 V 姐的提醒和回复!

    之前没考虑到这个问题,我刚才修改了下,应该可以了。

    主要是把 hljs 改成 position: relative;padding-left: 2.2em;

    不知道是否还有未知问题,稍后修改下帖子。

    效果如下

    r35.gif

  • wilsons 2 评论

    已更新,修复了 @Vanessa 姐提到的无法适应固定高度滚动问题。

    各位大佬们,再帮忙看看,如果还有其他问题请不吝赐教!

    1 操作
    wilsons 在 2024-08-30 11:56:52 更新了该回帖
    已修改,多谢。
    Vanessa
    V 姐辛苦了!
    wilsons
  • looyea 1 评论

    麻烦 看个问题吧,真不会,查了两个晚上了额

    求助关于这个红框框中的模块的问题

    插件问题的话我也不太清楚
    Vanessa
请输入回帖内容 ...