Numbered Headings in Markdown via CSS

styles.css

body { counter-reset: h1counter h2counter h3counter h4counter h5counter h6counter; }

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";
}

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

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?

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

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

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

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.

Amazing 👍🏼

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

@LoonyNoob if you reset all counters at the root, then the scope is maintained as expected:

body { counter-reset: h1counter h2counter h3counter h4counter h5counter h6counter; }

@patik Really nice! Thank you!

Hi,
I also have the same question as @netalex. Where do we put this css style in order for the md file to appear numbered on github?

How do i have numbering for level 1 headings too please.
the example here: https://www.w3schools.com/code/tryit.asp?filename=FZQ2MR6876E0
has failed already

@oodavid Thanks for the fix; I've updated the gist.

@netalex @AsiehH GitHub does not allow for CSS to affect README.md files through CSS for security reasons. However, I believe you can still add a <style> tag in the README and then copy the CSS into it.

@nyxee please update to the latest version of the gist, or add body { counter-reset: h1counter h2counter h3counter h4counter h5counter h6counter; } to your code (thanks to @oodavid)

@patik , this is working the way you want, as in the example. I would like to number the level one headings too. I am using markdown-preview-enhanced and put the required lines in ~/.mume/styles.less

Try mine, https://gist.github.com/rodolfoap/6cd714a65a891c6fe699ab91f0d22384 it adds support for [[TOC]]

I just can´t make it run on Gitlab. Does someone know how to add CSS to Gitlab markdown? See this open gitlab issue.