ブラウザ拡張(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にする)
適当だからサイトによってレイアウト崩れるけど気にしないこと (崩れていいサイトで使えば)

サンプル

悪くない