インデントに縦線を表示するUserCSS
https://gyazo.com/bf97530bebba40159503fe8afaef6370
code:style.css
.lines .line{
.indent-mark{height: 100%}
.table-block .indent-mark{height: auto}/*tableは除外する*/
}
.indent-mark{
.pad{
height: 100% !important;
overflow: unset !important;
}
span:not(:nth-last-child(-n+2)) .pad{
}
}
参考
いいところ
1行の文字数が多くて折り返されてもちゃんと縦線が引かれる
ヨイショ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
ヨイショ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
ヨイショ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～オイショ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
ヨイショ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
悪い？ところ
ドットの真ん中に線が引かれるわけではない
右よりに引かれる
が、これは普通に慣れる
真ん中にひいたとて、このような見た目になります
https://gyazo.com/4839c0dd0d5d5878653965f946678c59
直さなければ行けないところ
修正した
やってること
span:not(:nth-last-child(-n+2)) .pad
.indent-markの子要素の中の、最後から2つは除いたspan、の中の子要素の.padを持った要素を指定している
別にspan:not(:nth-last-child(1)):not(:nth-last-child(2)) .padという書き方でも良い
たとえば以下のような行で言えば
https://gyazo.com/132d76dad09a0e40fe916ac2205010f1
https://gyazo.com/e48e5b1cc78ae41f987fbe5ede323614
code:html
<span class="indent-mark" style="width: 3em;">
<span class="char-index c-0" data-char-index="0">
<span class="pad"> </span> <!-- これを指定してる -->
</span>
<span class="char-index c-1" data-char-index="1">…</span>
<span class="pad"> </span> <!-- これは最後から2番目のspanの中に入ってるから違う -->
</span>
<span class="dot"></span> <!-- これは最後から1番目な上に子を持ってない -->
</span>
普通の行では:nth-last-child(2)で十分だけど、:nth-last-child(1)はコードブロック記法をしてる行のために必要 「普通の行では:nth-last-child(2)で十分」なのは、兄弟要素の一番最後が<span class="dot"></span>だから
そもそも<span class="dot"></span>は子を持っていないので.padが当てはまるやつがいない
<span class="dot"></span>はコードブロック記法にはないので、:nth-last-child(1)の分が必要
test
code:test
test
table:fjasdkl
fasdjklfjaksl