思源编辑器显示行号

思源编辑器显示行号

严格意义上来说是块的序号

.protyle-wysiwyg {
    counter-reset: line-number; /* 初始化计数器 */
}

.protyle-wysiwyg > div {
    counter-increment: line-number; /* 每个div递增计数器 */
}

.protyle-wysiwyg > div::before {
    content: counter(line-number) ""; /* 显示行号 */
    position: absolute;
    color: #999; /* 设置行号颜色 */
    left: -55px; /* 行号不右对齐情况下的,默认主题左边距 */
    /* 行号右对齐需要下面这几个样式,以下只是针对默认主题调整的 */
    text-align:right; /* 行号右对齐,需要配置下面两个参数 */
    left: -96px; /* 设置行号左边距,可根据自身情况调整 */
    min-width:56px; /* 最小宽度,可根据自身情况调整 */
    font-size: 14px;
}

image.png

留下你的脚步
推荐阅读