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?

@ghost

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

@sleepyhollo

This comment has been minimized.

Copy link

commented Jul 15, 2019

thanks for this! I not using any extensions that wrap my headings in div, so it works as expected.

I am using it to get numbered headings in a raw markdown that I convert to html using python-markdown.

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.