コードブロック記法に行番号を表示するUserCSS
変更点
@media screenをなくした
行頭の空白の色の重なりをなくした
色をcss custom propertyで設定できるようにした
その他諸々
参考
.indent-markではなく本文の先頭のspanに行番号を入れている
ただ、これだと先頭に余計な空白が入ってしまうので、.indent-markを使う方法に戻した
その際、旧版で使っていたselectorとは違うものにした
2022-01-13
2021-10-11
おっと旧版だ
全然機能していない……
もし行番号が必要なら、新しいのに変えたほうがいいですねtakker.icon
code:style.css
@import '../コードブロック行頭の空白の色を変えるCSS/style.css';
}
.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;
}
/icons/hr.icon
旧版
コード記法の行番号を表示
選択範囲がずれるのを直した
↑のUserCSSと行番号表示を併用すると、選択範囲が１行以上ずれる
code:style.css.old(css)
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 {
}
code: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;
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 }
}