インデントに縦線を表示するようにした
from 2022/02/05
/customize/インデントレベルをわかりやすくするを流用して箇条書きのインデントに縦線を表示するようにした
ただ、色がまだちょっと強すぎる（目に悪い）のが気になるところ
めんどくさすぎて直す気が起きない( ◞‸◟)
彩度を下げたら別の色になってしまうから、もう少し明度を上げるべきか
RGBをHSLに変換してから、輝度（L）を221にしてみた
こんどは薄すぎて弱弱しい可愛らしい色になってしまった。
輝度を183に
（人によって好みはあると思うけど）大体いい感じなのでは？
若干濃い気がしなくもない
これ以上直すのめんどくさい
目に悪くない限界ラインだと思うのでこれ以上濃くできないんじゃないかな。
やっぱ濃すぎたので輝度を203に
いい感じなのでは？
これの嬉しさがあまりわからないです 
階層の意識がシンドくないですか?
階層が深いと、スマホで見づらいのです
スマホは画面が狭いので、複数行を一望しにくい
親階層となる行を探しにくい
その階層が（子階層を含めて）どこからどこまでなのかがわかりにくい
もともと階層を意識して書く人(
含む)には嬉しいと思う
プログラミングのときと同じ嬉しさ
ちなみに、試しにの個人Projectでも適用してみたのですが、合わなかったのでやめました…
井戸端のようなProjectでしか意味を成さないようです
階層が深い行が多い
1行あたりの文量がそこそこある
一度たくさん書き散らしてそのまま放置する事が多い人にはよさそう
インデントが深いままになる
style.css.app:not(.presentation) .indent-mark .char-index:not(:nth-last-child(1)):not(:nth-last-child(2)) {
position: relative;
}
.app:not(.presentation) .indent-mark .char-index:not(:nth-last-child(1)):not(:nth-last-child(2))::before {
content: " ";
position: absolute;
left: 50%;
margin: -4px 0;
}輝度203（デフォルト）
style.css.app:not(.presentation) .indent-mark .char-index:nth-child(6n+1)::before {
border-left: 2px solid #FBE09B; /* 色の指定 */
}
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+2)::before {
border-left: 2px solid #EFA7B1;
}
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+3)::before {
border-left: 2px solid #EAACD8;
}
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+4)::before {
border-left: 2px solid #AEC4E8;
}
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+5)::before {
border-left: 2px solid #97FFF3;
}
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+6)::before {
border-left: 2px solid #CBCBCB;
}輝度183
221-style.css.app:not(.presentation) .indent-mark .char-index:nth-child(6n+1)::before {
border-left: 2px solid #F9D375; /* 色の指定 */
}
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+2)::before {
border-left: 2px solid #E98593;
}
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+3)::before {
border-left: 2px solid #E18DC9;
}
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+4)::before {
border-left: 2px solid #8FADDF;
}
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+5)::before {
border-left: 2px solid #6FFFEE;
}
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+6)::before {
border-left: 2px solid #B7B7B7;
}箇条書きアイコンと同じ色
orig-style.css.app:not(.presentation) .indent-mark .char-index:nth-child(6n+1)::before {
border-left: 2px solid #F8CE64; /* 色の指定 */
}
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+2)::before {
border-left: 2px solid #E46C7D;
}
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+3)::before {
border-left: 2px solid #D14DAB;
}
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+4)::before {
border-left: 2px solid #6D95D5;
}
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+5)::before {
border-left: 2px solid #05FFE1;
}
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+6)::before {
border-left: 2px solid #DDDDDD;
}自動改行や縦に長くなる記法（画像埋め込み等）を入れると線が途切れてしまっていたので、
::before を使わない方式でも作ったanother example /nishio/Settings#620280e0aff09e0000ee45d3
