Header counter

Here is a piece of css code that works for preview pane.
I am not a css developer and am currently learning it. The code below is mostly from https://stackoverflow.com/questions/30925063/numbering-with-css-counter-for-headings and I modified a little to make it work in obsidian. Thanks a lot! I love the outline numbering.


However, It only works properly for the embedded block of md files. For non-embedded part, there’re some unknown issues that it fails to reset the counter…
Another issue is embedded contents are counted together with outer ones. How could that be?
Can anyone help? thanks

/*  heading counter  */
body {counter-reset: h1 h2 h3 h4 h5 h6}
h1 {counter-reset: h2}
h2 {counter-reset: h3}
h3 {counter-reset: h4}
h4 {counter-reset: h5}
h5 {counter-reset: h6}
h1:before {counter-increment: h1; content: counter(h1) ". "}
h2:before {counter-increment: h2; content: counter(h1) "." counter(h2) ". "}
h3:before {counter-increment: h3; content: counter(h1) "." counter(h2) "." counter(h3) ". "}
h4:before {counter-increment: h4; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "}
h5:before {counter-increment: h5; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "}
h6:before {counter-increment: h6; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". " }
h1.nocount:before, h2.nocount:before, h3.nocount:before, h4.nocount:before, h5.nocount:before, h6.nocount:before {content: ""; counter-increment: none} 
1 Like