インデントレベルをわかりやすくする
デフォルトの挙動ではインデントが深くなってくると階層がわかりにくいため作成してみました。
↓のようになります。
https://gyazo.com/e74584377431a7d13754c2a340a56c0b
code: 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: 43%;
margin: -4px 0;
border-left: 2px solid #dcdcdc; /* 色の指定 */ }
Chromeの拡張機能としても提供しているので良かったら使ってみてください。 不具合等気がついた点がありましたら、お知らせいただけると助かります。
不具合ではないのですが、一行が長くなり折り返されても線が途切れないようにするためにはどうすればよいでしょうか？
作者です。貴重なご意見ありがとうございます。現状、折り返される想定で作っていなかったので難しい気がしています。どうにかできないか考えてみようと思います。気長にお待ち下さいmm
最後から2行目の部分はborder-left: 2px solid #dcdcdc; /* 色の指定 */が正しいかとMijinko_SD.icon
ありがとうございますmm
nishio.icon
https://gyazo.com/8c97e243a80186b66c0bb08263b2232c
UserCSS.icon