Cosense Toolbox
indent rainbow UserScript
テーマ変更無効#インデント#レインボー#ガイド

indent rainbow UserScript

インデント（字下げ）の深さに応じて、ガイドの帯が4色で色分けされます。階層が深くなるほど色がローテーションして変わるので、どこがどのレベルか、ネストの段差がひと目で分かります。箇条書きを深くネストしたページが見やすくなります。

入れるだけでインデントに色がつきます。

デモ

疑似Cosenseページ・ライブプレビュー

インストール

設定ページの code:style.css に貼る
@import url('/api/code/cosense-toolbox/indent rainbow UserScript/style.css');
ソースコード全文を見る（CSS）
.indent-mark {
  height: 100% !important;
}
.indent-mark .pad {
  height: 100% !important;
  overflow: unset !important;
}
.indent-mark span:nth-child(4n + 1) .pad {
  background: lightblue !important;
  opacity: 0.5;
}
.indent-mark span:nth-child(4n + 2) .pad {
  background: lightpink;
  opacity: 0.5;
}
.indent-mark span:nth-child(4n + 3) .pad {
  background: lightyellow;
  opacity: 0.5;
}
.indent-mark span:nth-child(4n + 4) .pad {
  background: lightgreen;
  opacity: 0.5;
}
元のCosenseページを見る ↗