ユーザーCSSで見出しと箇条書きのレベルを見やすくする (Stylus)

markdownで書かれた記事について
見出し(h1～h6)がぐちゃぐちゃだったり
箇条書きが深すぎたり
構造が分かりにくくてキレたから書いた

見出しの強さで文字の太さが変わるより#が表示されててくれたほうがいい

ブラウザ拡張(Stylus)を入れておく

Stylus - Chrome ウェブストア

昔はブラウザにデフォルトでそういう機能あった気がするけどなぜなくなったのか

CSSをぶち込む

Stylusのアイコンをクリックして絞り込みを「すべて」か、好きなurlにして保存

h1 {
    --mark: "# "
}
h2 {
    --mark: "## "
}
h3 {
    --mark: "### "
}
h4 {
    --mark: "### # "
}
h5 {
    --mark: "### ## "
}
h6 {
    --mark: "### ### "
}

:is(h1, h2, h3, h4, h5, h6):before {
    content: var(--mark);
    font-size: 0.8rem;
    display: inline-block;
    font-family: 'Courier New', Courier, monospace;
    opacity: 0.4;
    margin-right: 4px;
}

ul,
ol,
blockquote {
    border-radius: 10px 0px 0px 10px;
    background-color: rgba(100, 100, 100, 0.08);
}

見出しの左側に#が表示される。
箇条書きは深さで色が濃くなる。(暗くしていきたいなら100を0にする)
適当だからサイトによってレイアウト崩れるけど気にしないこと (崩れていいサイトで使えば)

サンプル

悪くない