Cosenseのコードブロックの表示を変えるUserCSS
参考元：他のprojectでつかうUserCSS - くたくたじゅうよん
code:style.css
/* 行番号の背景となる行パッド部分を指定 */
.line span.code-block .pad:not(.code-block-margin){
background-color: rgba(0,0,0,0.05); /* 行の背景を薄いグレーに */
height: 1.7em; /* 行の高さを調整して詰まりを防ぐ */
}
/* コードブロックに行番号を表示する設定 */
@media screen {
/* section-title や code-block-start が現れたタイミングで行番号を 0 にリセット */
.section-title, .code-block-start {
counter-reset: codeline; /* CSS カウンタ codeline を初期化 */
}
/* 1行ごとにカウンタを increment して行番号が進む */
.code-block .pad:not(.code-block-margin) {
counter-increment: codeline; /* 行番号を +1 する */
}
/* 行番号の実際の表示（擬似要素 ::before で行番号を描画） */
.code-block .pad:not(.code-block-margin)::before {
content: counter(codeline); /* 現在の行番号を文字として出力 */
position: relative; /* 相対位置指定（絶対ではないので行内配置） */
display: inline-block; /* 幅を持たせるため inline-block を使用 */
left: 1px; /* ほんの少し右にずらして見やすく */
z-index: 10; /* 背景に埋もれないよう前面へ */
min-width: 50px; /* 行番号の表示幅。短い行番号でも揃う */
text-align: left; /* 左寄せで自然な表示 */
vertical-align: bottom; /* テキストの底を揃え、行間のズレを軽減 */
/* 行番号のフォントスタイル */
font-family: Cica,Consolas,Roboto,Helvetica,Arial,
"Hiragino Sans",sans-serif; /* 等幅を優先しつつフォールバック */
color: #2f2f2f; /* グレー */
font-size: 11px; /* 小さめフォントで行番号らしさ */
}
/* 通常行の行番号を少し薄く（.cursor-line 以外） */
.code-block .pad:not(.code-block-margin)::before {
opacity: .5; /* デフォルトでは半透明で主張を弱める */
}
/* カーソル行（現在編集中の行）だけ行番号を濃くして強調 */
.cursor-line .code-block .pad:not(.code-block-margin)::before {
opacity: 1; /* 完全表示 */
font-weight: bolder; /* 太字で「今の行」であることを示す */
}
}