Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Numbered Headings in Markdown via CSS
h1 { counter-reset: h2counter; }
h2 { counter-reset: h3counter; }
h3 { counter-reset: h4counter; }
h4 { counter-reset: h5counter; }
h5 { counter-reset: h6counter; }
h6 {}
h2:before {
counter-increment: h2counter;
content: counter(h2counter) ".\0000a0\0000a0";
}
h3:before {
counter-increment: h3counter;
content: counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
}
h4:before {
counter-increment: h4counter;
content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) ".\0000a0\0000a0";
}
h5:before {
counter-increment: h5counter;
content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) ".\0000a0\0000a0";
}
h6:before {
counter-increment: h6counter;
content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) "." counter(h6counter) ".\0000a0\0000a0";
}
@patik

This comment has been minimized.

Copy link
Owner Author

commented Dec 21, 2016

Here's what it does. Markdown on the left, HTML on the right.

image

@netalex

This comment has been minimized.

Copy link

commented Dec 19, 2017

hwo to use it? markdown files does'nt allow css styling, it relies on compilation to html. I.E. into github, how could this be useful?

@jlanza

This comment has been minimized.

Copy link

commented Aug 14, 2018

have you tried to use it as VSCode style.css?

@nogayama-ibm

This comment has been minimized.

Copy link

commented Oct 3, 2018

This is very useful ! Thanks!
# I am using this with Macdown app

@LoonyNoob

This comment has been minimized.

Copy link

commented Jan 31, 2019

Does not work properly if headings are wrapped in e.g. DIV tags.
For testing, I created the following example on W3Schools:
https://www.w3schools.com/code/tryit.asp?filename=FZQ2MR6876E0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.