コードブロック記法に行番号を表示するUserCSS (Mijinko)
コードブロック記法に行番号を表示するUserCSSの
さんによる実装
デザイン内容
行頭を縦線で区切っている
これがとてもいい
コードブロック行頭の空白の色を変えるCSS
より見やすい
カーソルのいる行番号がハイライトされる
番号は右寄せ
コードブロック記法に行番号を表示するUserCSSでは左寄せしている
バグ
ほかのUserCSSと干渉しているのかも
2022-03-30 13:39:30
@media screen で制限がかかっているだけみたいてかコードブロック記法に行番号を表示するUserCSS (Mijinko)#622949c81280f00000779f25にそう書いてあるじゃん……
よく読んでいなかった
Thanks, 
！
style.cssbody *::before {
--code-number-color: var(--code-color, #342d9c);
/* --accent-color: ; */
}
/* コード記法の行番号を表示 -- ウィンドウ幅768px以上で適用 */
/* ↑無効化した */
.section-title {
counter-reset: codeline;
}
.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;
/* ↓行番号の色の指定はここ */
color: var(--code-number-color);
}
/* カーソル行の行番号を濃く表示する */
.code-block span.indent code.code-body::before {
opacity: .5;
}
.cursor-line .code-block span.indent code.code-body::before {
opacity: 1;
font-weight: bolder;
/* ↓カーソル行の背景色の色はここ */
background-color: var(--accent-color);
}
#2022-03-30 13:42:14
#2022-03-11 21:34:40
#2022-03-10 09:38:39
#2022-01-13 12:18:24