●インデントレベルを常時表示する
あくまで自分用なのでアイデアを共有するという意味で公開しています。ご使用の際は変なところを各自で改良なさってください。
https://gyazo.com/2507754e7805a6f3f62fc666dcef6a20
1バレットのすぐ上に表示するタイプ
https://gyazo.com/5fb8601b4116e9c14f82d16dac2d5c05
code:style.css
.line .indent-mark .dot::after {
top: -18px;
left: -0.4px;
font-size: 8px; color: #ccc; position: absolute;
}
.line .indent-mark .c-0 + .dot::after {
content: '1';
}
.line .indent-mark .c-1 + .dot::after {
content: '2';
}
.line .indent-mark .c-2 + .dot::after {
content: '3';
}
.line .indent-mark .c-3 + .dot::after {
content: '4';
}
.line .indent-mark .c-4 + .dot::after {
content: '5';
}
.line .indent-mark .c-5 + .dot::after {
content: '6';
}
.line .indent-mark .c-6 + .dot::after {
content: '7';
}
.line .indent-mark .c-7 + .dot::after {
content: '8';
}
余談これ、Kakauでのインデントレベルの表示と似ていて、Kakau触って「あッッッ」ってなりました。私は他のもので見たことなかったので。 注意topもleftもフィーリングです。バレットの真上にないのはわかっているのですが、PCとAndroidを行ったり来たりしてどちらで見てもまあまあな位置を手探りで調整したところ妥当な位置がこの辺になりました。（CSSの知識があまりないのでうまい設定方法がよくわからない）
2左の余白に並べておくタイプ
https://gyazo.com/94328a7281e1d451d8ecb6e0f922d414
code:style.css
.line .indent-mark .dot::before {
top: -13px;
font-size: 8px; color: #bbb; position: relative;
}
.line .indent-mark .c-0 + .dot::before {
content: '1';
right: 15px;
}
.line .indent-mark .c-1 + .dot::before {
content: '2';
right: 37.5px;
}
.line .indent-mark .c-2 + .dot::before {
content: '3';
right: 60px;
}
.line .indent-mark .c-3 + .dot::before {
content: '4';
right: 82.5px;
}
.line .indent-mark .c-4 + .dot::before {
content: '5';
right: 105px;
}
.line .indent-mark .c-5 + .dot::before {
content: '6';
right: 127.5px;
}
.line .indent-mark .c-6 + .dot::before {
content: '7';
right: 150px;
}
.line .indent-mark .c-7 + .dot::before {
content: '8';
right: 172.5px;
}
注意こっちは更にcontentのrightの計算がぶっちゃけ感覚で正確さを全然保証できないので、ご使用の際はちゃんと計算したりすることをおすすめします。（合ってる気はする）（気がするとかいう曖昧さ）
マウスオーバーの方を採用している理由
自分用の非公開プロジェクトでは常時表示の2番めの方を使っている
公開用だと数字が常に見えているのは余計な情報という感じがする
どの階層なのか確認したいことが稀にあるかもしれないが、普通は要らないので
（いずれにしろバレットの色を変えたほうが明らかにわかりやすいとは思うけど、色調を整えたいので…）