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

显示代码行的问题

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

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

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

然后开启了我之前的解决方案，发现代码行有点错位，这不连夜修复了这个问题，使之适应 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 的回帖

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

原理及使用说明

所以，有两种方案

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

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

   

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 处根据需要动态开启关闭即可。

最终效果

但这种方法，无法针对某一个代码块进行隐藏，如果你确实想针对某一个代码块进行隐藏，只能按照代码块 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 姐的提醒和回复！