Skip to content

Instantly share code, notes, and snippets.

@patik
Forked from joshbode/numbered_headings.md
Last active March 18, 2024 10:11
Show Gist options
  • Star 49 You must be signed in to star a gist
  • Fork 8 You must be signed in to fork a gist
  • Save patik/89ee6092c72a9e39950445c01598517a to your computer and use it in GitHub Desktop.
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";
}
@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

@rodolfoap
Copy link

rodolfoap commented Aug 25, 2023

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