コードブロック行頭の空白の色を変えるCSS

コードブロック記法の先頭の空白の色を変える

これがないと、文字が先頭にあるのか間に空白が挟まっているのか判断しにくい

https://gyazo.com/f15968c18fbf0b09133398b2ac680cd1

2021-03-21 06:26:56

色が重ならないようにした

code: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);

}

/icons/hr.icon

code:style.css.old(css)

.line span.code-block .indent-mark spanclass^="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でならこれでうまくいった

旧版

これだと、行頭を選択したときの選択範囲が崩れてしまう

https://gyazo.com/e264c5a9be0a04196ccd311cd2d2c7b9

code:style.old.css

.line span.code-block .pad:not(.code-block-margin){

background-color: rgba(0,0,0,0.05);

height: 1.7em;

}