コードブロック行頭の空白の色を変えるCSS
コードブロック記法の先頭の空白の色を変える
これがないと、文字が先頭にあるのか間に空白が挟まっているのか判断しにくい
2021-03-21 06:26:56
色が重ならないようにした
style.css.code-block .indent-mark {
height: 100%;
}
.code-block .indent-mark .pad {
height: 100%;
overflow: unset;
}
.code-block .indent-mark span:last-child .pad {
background-color: rgba(0,0,0,0.05);
}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;
}最後の二行を追加することで、親要素いっぱいに領域を広げることができる
position: absoluteのみ書くとうまく行く
だいぶ雑だけど、Cica fontでならこれでうまくいった
旧版
これだと、行頭を選択したときの選択範囲が崩れてしまう
style.old.css.line span.code-block .pad:not(.code-block-margin){
background-color: rgba(0,0,0,0.05);
height: 1.7em;
}#2021-03-21 06:28:52
#2020-12-26 07:10:44