コードブロックで行が折り返されたとき、インデント部分にコードブロックの背景色がついてしまう
https://gyazo.com/9628f88a0b30580c709b6fee4e9e2904
行番号を表示するUserCSSを外しても色はつく
行番号がない場合は、同一行であることを示すために必要なのかもしれない
技術的限界っぽいtakker.icon
実装がめちゃ難しい。。shokai.icon
これは今のところ仕方がない物と考えてくださいshokai.icon
なるほど。。ありがとうございますyosider.icon
何が難しいんだろsta.icon
CSSの仕様的な限界？
DOMのうち、wrap折り返しされた部分の色だけを変える方法がCSSに存在しないtakker.icon
CSS無知なので解説の意味（wrapという概念とか）が理解できませんが、CSSの限界なのですねsta.icon
なんとなく英語を使っただけです。普通に折り返しって書けばよかったtakker.icon
「DOMってなんだっけ」レベルなので、あとで勉強してみるかsta.icon
<div>とか<img>のことですtakker.icon
了解ですsta.icon
ああ、なるほど、「折り返された部分の検出」というハードルなのか
CSSで色を付ける方法って実はそんなに多くないんですよねMijikko.icon
基本的なものを挙げると
background-colorを使ってうまく色を塗るためには、塗る要素の形が塗りたい場所と同じでなければならないのですが、今ある要素だけだとそれが難しいんですよね
注：要素とは<div>とか<img>のことです
ここ知りませんでした。なるほどですsta.icon
試しに、関連する要素全てに違う色を塗ってみたものがこちらになります
https://gyazo.com/0f2a3ac699c87de66c60d174cc2535ff
.line .code-block span.indentが割といい感じに被ってね…？🤔Mijikko.icon
コードブロックの形と一致している要素が１つもないんですよね
なので、折り返しだけ色を塗らないというのは割と難しいのです
解決策としては
要素の形を変える
要素の中に入っている文字の位置を変えずに形だけ変えるのは、現状のCSSの仕様だと難しかった記憶
新しく色を塗るための要素を増やす
（どちらにしても）コードブロックに綺麗に被せるのが難しい
余談
Scrapboxの内部構造は普通のWebサイトと比べると複雑すぎるので、普通のWebサイトで使えるような手段が使えないことがある
あくまでWebアプリなのでここは仕方ないです
workaround
https://gyazo.com/2907227c9019bfe440eca289dca86cc5
code:style.css
.line span.code-block .code-block-margin {
background-color: transparent;
}