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

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

test

1

2

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

3

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

4

hr

色設定

style.css

body *::before {

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

/* --code-number-color: #1c2b27; */

/* --code-accent-color: #c9e6de; */

}

counterを使用して行番号カウント

style.css

.section-title {

counter-reset: codeline;

}

resetは.section-titleで行う

カウンタは親か兄弟からしか継承できないので.code-block.startで行っても効果がない

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;

border-right: solid 1px #fff;

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); /* 背景色 */

}

ダークテーマ対応done