コードブロックの行番号を表示するUserCSS

code:test

1

2

code:section-titleなし→カウント継続

3

code:空行を開けるとsection-titleがつく→カウントリセット

4

hr.icon

色設定

code:style.css

body *::before {

--code-number-color: var(--code-color);

}

code:style.css

.section-title {

counter-reset: codeline;

}

code:style.css

.code-block span.indent code.code-body {

counter-increment: codeline;

margin-left: -1.5em;

padding-left: 2.3em;

}

.code-block span.indent code.code-body::before {

content: counter(codeline);

position: absolute;

display: inline-block;

z-index: 10;

margin-left: -2.4em;

width: 2em;

padding-right: 0.2em;

text-align: right;

vertical-align: bottom;

opacity: .5; /* 薄くする */

color: var(--code-number-color); /* 行番号の色 */

}

/* カーソル行の行番号を強調 */

.cursor-line .code-block span.indent code.code-body::before {

opacity: 1;

font-weight: bolder;

background-color: var(--code-accent-color); /* 背景色 */

}