ページ余白に行番号を表示するUserCSS

コードブロックに行番号を表示するCSSの改変。

code:style.css

@media screen {

.page .line.section-0.line-title.section-title + .line,

.page .line.section-title:has(.level-5) + .line {

counter-reset: line;

}

.page .line:not(.section-0.line-title.section-title) {

counter-increment: line;

&:not(:has(+ .section-title), .section-title:has(.level-5)) .text::before {

content: counter(line);

position: absolute;

display: inline-block;

z-index: 10;

margin-left: -2.4em;

width: 2em;

padding-right: 0.5em;

text-align: right;

vertical-align: bottom;

/* ↓行番号の色の指定はここ */

color: var(--line-number-text-color, hsl(from var(--body-bg-copy, var(--body-bg, var(--navbar-bg-copy)))) h 85% 35%);

/* カーソル行の行番号を濃く表示する */

opacity: .5;

}

.cursor-line &::before {

opacity: 1;

font-weight: bolder;

/* ↓カーソル行の背景色の色はここ */

background-color: var(--code-accent-color);

}

}

}