ページ余白に行番号を表示するUserCSS
行番号を表示するUserCSSの類似品。余白外ではなくページ余白内に行番号を表示する
画面幅の狭いモバイル端末等でも行番号が画面外にはみ出さない
横幅の長い表をどのように表示するか問題への対処でページを横スクロール可能にするページを横スクロール可能にしたために生じた問題
from /Mijinko/コードブロックの行番号を表示するUserCSS
主な改変箇所：
「画面幅に応じてページの表示スケールを変更する」の変数を参照するように。
2026-04-23 CSS変数 --cursor-line-margin-bg を導入した
変更後：&.cursor-line::before { background-color: var(--cursor-line-margin-bg); }
code:style.css
@media screen {
/* タイトルから数えるときは :not(.line-title) を消す */
:where(.editor) .line:where(:not(.line-title)) { counter-increment: line }
/* タイトルから数えるときは :not(.line-title) を消す */
:where(.app:not(.presentation)) :where(.editor) .line:where(:not(.line-title)) {
&::before {
content: counter(line);
display: inline-block; position: absolute;
z-index: 0; pointer-events: none; /* テロメアの操作に干渉しないように */
padding-top: calc((var(--calculated-paragraph-line-height, 24px) - var(--page-font-size)) * 1/4);
padding-right: 0.2em;right: 100%; text-align: right;
top: a; vertical-align: middle; height: var(--calculated-paragraph-line-height, 24px);
min-width: calc(var(--page-padding-left, 21px) - var(--telomere-width, 5px));
/* 行番号のフォントとか色とかの指定はここ */
--line-number-text-color: gray;
color: var(--line-number-text-color, hsl(from var(--brand-color, var(--body-bg, midnightblue)) h 85% 35% / 65%));
font-family: var(--monospace, "Roboto Flex"), monospace, var(--icons, "AppIcons"), ui-sans-serif !important;
/* 字幅を縮めて3桁まで収まるようにする */
--font-width: max(((var(--page-padding-left, 21px) - var(--padding-right, 0.2em)) / 4), 300%);
font-stretch: var(--font-width); /* font-width: の別名 */
font-width: var(--font-width);
font-size: 0.85em;
font-weight: 400;
}
/* セクション外の行番号を非表示に */
&:has(+ .section-title):not(.cursor-line)::before {
color: transparent
}
/* カーソル行の行番号を強調表示する */
&.cursor-line::before {
font-weight: bolder;
color: var(--cursor-color, crimson);
background-color: var(--cursor-line-margin-bg);
}
}
}
#ページ余白 #UserCSS