Skip to content

Instantly share code, notes, and snippets.

@patik
Forked from joshbode/numbered_headings.md
Last active February 14, 2025 06:54
Show Gist options
  • Select an option

  • Save patik/89ee6092c72a9e39950445c01598517a to your computer and use it in GitHub Desktop.

Select an option

Save patik/89ee6092c72a9e39950445c01598517a to your computer and use it in GitHub Desktop.
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";
}
@kevduc

kevduc commented Nov 1, 2021

Copy link
Copy Markdown

@patik Really nice! Thank you!

@AsiehH

AsiehH commented May 12, 2022

Copy link
Copy Markdown

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

nyxee commented Jun 18, 2022

Copy link
Copy Markdown

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

patik commented Jun 19, 2022

Copy link
Copy Markdown
Author

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

@patik

patik commented Jun 19, 2022

Copy link
Copy Markdown
Author

@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

patik commented Jun 19, 2022

Copy link
Copy Markdown
Author

@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

nyxee commented Jun 20, 2022

Copy link
Copy Markdown

@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

@rodolfoap

rodolfoap commented Aug 25, 2023

Copy link
Copy Markdown

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.

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