Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Numbered Headings in Markdown via 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";
}
@patik
Copy link
Author

patik commented Dec 21, 2016

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

image

@netalex
Copy link

netalex 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
Copy link

jlanza commented Aug 14, 2018

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

Copy link

ghost commented Oct 3, 2018

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

@LoonyNoob
Copy link

LoonyNoob 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
Copy link

sleepyhollo 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.

@bjnortier
Copy link

bjnortier commented Apr 21, 2020

Amazing 👍🏼

@oodavid
Copy link

oodavid commented Apr 28, 2020

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

@kevduc
Copy link

kevduc commented Nov 1, 2021

@patik Really nice! Thank you!

@AsiehH
Copy link

AsiehH commented May 12, 2022

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?

@nyxee
Copy link

nyxee commented Jun 18, 2022

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

@patik
Copy link
Author

patik commented Jun 19, 2022

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

@patik
Copy link
Author

patik commented Jun 19, 2022

@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.

@patik
Copy link
Author

patik commented Jun 19, 2022

@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)

@nyxee
Copy link

nyxee commented Jun 20, 2022

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment