settings
Cosenseでピン留めしたページの段を分けるUserCSS
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
Cosenseでピン留めされたページの左側に色をつけるUserCSS
code:style.css
/* ピン留めされたページ全体の背景色を変える */
.page-list-item.pin {
background: #1971c2;
}
/* ピン留めを視覚的に分けたいなら枠線も有効 */
.page-list-item.pin {
border-left: 2px solid #1971c2;
padding-left: 2px;
/* border-bottom: 2px solid gray; */
/* padding-bottom: 2px; */
}
Cosenseのコードブロックの表示を変えるUserCSS
code:style.css
/* 行番号の背景となる行パッド部分を指定 */
.line span.code-block .pad:not(.code-block-margin){
background-color: rgba(0,0,0,0.02); /* 背景：透明度のあるグレー */
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: 3px; /* ほんの少し右にずらして見やすく */
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: 0.3; /* 半透明 */
}
/* カーソル行の強調 */
.cursor-line .code-block .pad:not(.code-block-margin)::before {
opacity: 1; /* 不透明 */
font-weight: bolder; /* 太字 */
}
}