インデント自体に色を付ける

https://scrapbox.io/files/62d950c5b6bf1e001d79be1f.png

code:style.css

.indent-mark .char-index{

--ir-opacity: 0.06;

--ir-red: rgba(255, 0, 0, var(--ir-opacity));

--ir-orange: rgba(255, 165, 0, var(--ir-opacity));

--ir-yellow: rgba(255, 255, 0, var(--ir-opacity));

--ir-green: rgba( 0, 128, 0, var(--ir-opacity));

--ir-blue: rgba( 0, 0, 255, var(--ir-opacity));

--ir-violet: rgba(238, 130, 238, var(--ir-opacity));

--ir-purple: rgba(128, 0, 128, var(--ir-opacity));

}

.indent-mark .char-index:nth-child(7n+1) { background-color: var(--ir-red) }

.indent-mark .char-index:nth-child(7n+2) { background-color: var(--ir-orange) }

.indent-mark .char-index:nth-child(7n+3) { background-color: var(--ir-yellow) }

.indent-mark .char-index:nth-child(7n+4) { background-color: var(--ir-green) }

.indent-mark .char-index:nth-child(7n+5) { background-color: var(--ir-blue) }

.indent-mark .char-index:nth-child(7n+6) { background-color: var(--ir-violet) }

.indent-mark .char-index:nth-child(7n) { background-color: var(--ir-purple) }

.indent-mark .char-index:nth-last-child(1) { background-color: transparent; }

VSCodeのIndent-rainbowみたいなもの

インデントレベルが見やすい

既知の問題

薄さをプロジェクトテーマによって変えたい

テーマによっては0.06では全く見えない

クソ対応すぎる

隣接行が似た色なのは本末転倒では？

趣味で色入れ替えてくだし

クソｔ

UserCSS.icon