ネストされたコード記法内で折り返しが入った時の行頭部分の背景を無しにしてほしい
sta.icon わかりづらくてすみませんが
下記画像の 赤の部分、はみ出ていてちょっと見栄えが悪いので、無い方が良いと思う のですが、いかがでしょうか?
でも「折り返されてることがわかりづらい」という意味では微妙かも……
折り返されてる行と折り返されてない行とを区別する何か ← これがあれば良い?
以下例(画像)
https://gyazo.com/9a0d41ad88992c6f3b7bcd4bdc2db53c
以下例(実物)
a
code:python
print('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
code:novel
小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説小説
わかるyuta0801.iconyanma.icon
この要望と重複していますnekketsuuu.icon
実装がめちゃ難しい。。shokai.icon
https://gyazo.com/2907227c9019bfe440eca289dca86cc5
画像のようにコードブロックがある行を全部同じ色にしてしまうことで目立ちにくくする、ということはできます
code:style.css
.line span.code-block .code-block-margin {
background-color: transparent;
}
sta.iconありがとうございます!良さそうです!
他の部分への影響があるかもしれませんが、以下のCSSでコードブロックのはみ出た部分が消えるようになりました
code:style.css
.line span.code-block .indent-mark {
height: 100%;
}
.line span.code-block .indent-mark .pad {
height: 100%;
overflow: unset;
}
適用すると以下(画像)のようになります
https://gyazo.com/f1bf065223dc44817243b26fa2566b39
なお、これは個人の好みですが改行がわかりにくくなるので追加で以下のCSSを設定しています
code:style.css
.code-block span.indent code.code-body::before {
content: " ";
position: absolute;
display: inline-block;
margin-left: -2.2em;
border-right: solid 2px;
}
.code-block span.indent code.code-body::before {
opacity: .2;
}
.cursor-line .code-block span.indent code.code-body::before {
opacity: 1;
font-weight: bolder;
}
適用すると以下(画像)のようになり改行部分がわかりやすくなります
https://gyazo.com/67177e305f84701837d5fa161eb1ab58