コードブロック記法に行番号を表示するUserCSS
todos
3桁行になるとstyleが崩れる
https://gyazo.com/064284195e1e251e1f8d8d224dd46b21
code:style.css
/* 共通変数の定義 */
body {
*::before {
--code-number-color: var(--code-color, #342d9c); /* --accent-color: ; */
}
}
/* 行番号のリセット */
.section-title {
counter-reset: codeline;
}
/* コードブロックの行番号表示 */
.code-block {
span.indent {
code.code-body {
counter-increment: codeline;
margin-left: -1.5em;
padding-left: 2.3em;
&::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; /* 行番号の色の指定 */
color: var(--code-number-color);
opacity: 0.5;
}
}
}
}
/* カーソル行のスタイル上書き */
.cursor-line {
.code-block {
span.indent {
code.code-body::before {
opacity: 1;
font-weight: bolder;
/* カーソル行の背景色の指定 */
background-color: var(--accent-color);
}
}
}
}