コードブロック記法に行番号を表示するUserCSS
from Settings
変更点
@media screen をなくした行頭の空白の色の重なりをなくした
色をcss custom propertyで設定できるようにした
その他諸々
これに併せて、コードブロック行頭の空白の色を変えるCSSを変更した
参考
.indent-mark ではなく本文の先頭の span に行番号を入れているただ、これだと先頭に余計な空白が入ってしまうので、
.indent-mark を使う方法に戻したその際、旧版で使っていたselectorとは違うものにした
2022-01-13
12:18:24 コードブロック記法に行番号を表示するUserCSS (Mijinko)
2021-10-11
おっと旧版だ
全然機能していない……
もし行番号が必要なら、新しいのに変えたほうがいいですね
2021-06-08 21:45:18 scrapboxの文字spanの仕様変更に伴うUserScriptの修正
style.css@import '../コードブロック行頭の空白の色を変えるCSS/style.css';
html[data-project-theme="paper-dark-dark"],
html[data-project-theme="defaut-dark"] {
--code-line-number-color: #D181FF;
}
.section-title, .code-block-start {
counter-reset: codeline
}
.code-block .indent-mark > span.char-index:last-child {
counter-increment: codeline
}
body:not(.presentation) .code-block .indent-mark > span.char-index:last-child::before {
content: counter(codeline);
position: absolute;
}
.code-block .indent-mark > span.char-index:last-child::before {
color: var(--code-line-number-color, #3f3f3f);
}
/* カーソル選択時の行番号の色 */
.cursor-line .code-block .indent-mark > span.char-index:last-child::before {
color: var(--cursor-code-line-number-color, #FF00F0);
font-weight: bolder;
}
旧版
コードブロック記法に行番号を表示するUserCSS
コード記法の行番号を表示
2020-12-26 07:13:15 コードブロック行頭の空白の色を変えるCSSをつかって直した
選択範囲がずれるのを直した
2020-12-31 15:05:53 行番号を表示しないなら/yuiseki/Settings#5fe7114dd7d3c3000084fbfaでも可
↑のUserCSSと行番号表示を併用すると、選択範囲が１行以上ずれる
style.css.old(css).line span.code-block .indent-mark span[class^="c-"] {
position: relative;
top: -0.5em;
}
.line span.code-block .pad:not(.code-block-margin){
background-color: rgba(0,0,0,0.05);
height: 1.7em;
position: relative;
top: 8px;
}
.line span.code-block .code-block-margin {
background-color: #fefefe;
}style.css.old(css)@media screen {
.section-title, .code-block-start { counter-reset: codeline }
.code-block .pad:not(.code-block-margin) { counter-increment: codeline }
.code-block .pad:not(.code-block-margin)::before {
content: counter(codeline);
position: relative;
display: 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: #3f3f3f;
font-size: 11px;
}
/* カーソル行の行番号を濃く表示する */
.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 }
}#2022-03-10 09:39:19
#2022-01-13 12:19:14
#2021-10-11 21:31:19
#2021-06-08 21:45:43
#2021-03-21 06:16:10