偶数番目のインデントに影をつけるUserCSS
from /nishio/インデント表示
from インデントを可視化
https://gyazo.com/7ae5f7d92cc86b4819b27ec5cfe04872
code:style.css
.indent-mark {
height: 100% !important;
}
height: 100% !important
しないと影が途切れ途切れにしかつかない
!importantがないと効かない
code:style.css
.indent-mark .pad {
height: 100% !important;
overflow: unset !important;
}
height: 100% !important
しないと影が途切れ途切れにしかつかない
!importantがないと効かない
overflow: unset !important
しないとなぜか改行時のカーソルが若干下にずれる
https://gyazo.com/235d67b6dcdb529223e59bcd4568e109
スマホだとなぜか!importantがあっても下にずれるdone.icon
PCの開発者ツールでスマホモードにしても再現しない
デバッグ用CSSを追加してreloadしたら直った…
!importantがないと効かず、overflow: hiddenになる
通常の箇条書きの影は正常だが、コードブロックがこんな感じになる
https://gyazo.com/efe17a28342ae6ef02dd3c8722be2b0d
code:style.css
.indent-mark span:nth-child(2n+2) .pad {
/* background: #f8f8f8; */
background: oklch(
from var(--page-bg)
calc(
l
+ max(0, 0.5 - l) * 0.2 /* 明度 < 0.5 → 明るくする */
- max(0, l - 0.5) * 0.05 /* 明度 > 0.5 → 暗くする */
)
c h
);
}
オリジナルだとダークモードでも白くなってしまう
https://gyazo.com/b771e2f79e0cefa6152f7db5123cc48a
明度0.5で分岐して、明るい背景では少し暗く、暗い背景では少し明るく
暗い背景では明るくする度合いを大きくしないと見えづらかったので係数を大きくする
code:style.css
/* テロメアクリック時は無効化 */
.permalink .indent-mark span:nth-child(2n+2) .pad {
background: unset;
}
テロメアのメニュー表示時には無効化
しないとこうなる
https://gyazo.com/475e08e1a12d241a239720439441ccef
祖先要素に.permalinkがつく
code:style.css!
/* デバッグ用：境界線を表示 */
.indent-mark .pad {
height: 100% !important;
overflow: unset !important;
border: 1px solid red !important; /* デバッグ用 */
box-sizing: border-box !important;
}
/* カーソル位置の参考線 */
.cursor {
outline: 2px solid blue !important;
}
問題
引用記法内で箇条書き時
ほげ
ふが
ぴよ
ぴよ
コードブロックと同化して見える
hoge
fuga
code:ts
z.string().min(1)
z.object({ title: z.string() })
z.array(z.number())
z.union(...)
z.enum(...)
foo
bar