Table of Contents
Numbered headings per CSS only
Here follows the CSS only approach for numbered headings (see the numberedheadings plugin for a different approach).
The following CSS code will number all headlines of your wiki content, as well as their TOC counterpart.
Put it either in one of your template's CSS files (and a second time in your print.css
, if you want the numbers to be printable) or in a userstyle.css
in your ./conf
directory (or userall.css
if it should also be used for the print version):
- userstyle.css
.dokuwiki .page {counter-reset: level1;} .dokuwiki #dw__toc:before, .dokuwiki #dw__toc:after {counter-reset: level1; content: "";} .dokuwiki #dw__toc h3:before{content: ""} .dokuwiki .page h1, .dokuwiki ul.toc li.level1 {counter-reset: level2;} .dokuwiki .page h2, .dokuwiki ul.toc li.level2 {counter-reset: level3;} .dokuwiki .page h3, .dokuwiki ul.toc li.level3 {counter-reset: level4;} .dokuwiki .page h4, .dokuwiki ul.toc li.level4 {counter-reset: level5;} .dokuwiki .page h5, .dokuwiki ul.toc li.level5 {} .dokuwiki .page h1:before, .dokuwiki ul.toc li.level1 a:before { content: counter(level1) " "; counter-increment: level1; } .dokuwiki .page h2:before, .dokuwiki ul.toc li.level2 a:before { content: counter(level1) "." counter(level2) " "; counter-increment: level2; } .dokuwiki .page h3:before, .dokuwiki ul.toc li.level3 a:before { content: counter(level1) "." counter(level2) "." counter(level3) " "; counter-increment: level3; } .dokuwiki .page h4:before, .dokuwiki ul.toc li.level4 a:before { content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) " "; counter-increment: level4; } .dokuwiki .page h5:before, .dokuwiki ul.toc li.level5 a:before { content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) "." counter(level5) " "; counter-increment: level5; }
This works for the default template. For other templates every occurence of .page
should be substituted with the template's “content surrounding box” (probably “#content
” or similar).
As of some chromium (?) update circa. June 2024 the numbering continues incrementing from the ToC onto the page body. This can be fixed by a change in the second line to use counter-set rather than counter-reset on the toc:before and :after. This does appear to be a chromium thing, Firefox works using set or reset.
Drawbacks
- no restriction to certain pages (yet; could be done through another plugin; in the standard template it could at least be restricted by adding
.mode_show
) - The first
h1
which kind of works as a page title is numbered
Edit to exclude the first h1 (page title) from numbering
- userstyle.css
.dokuwiki .page {counter-reset: level1;} .dokuwiki #dw__toc:before, .dokuwiki #dw__toc:after {counter-reset: level1; content: "";} .dokuwiki #dw__toc h3:before{content: ""} .dokuwiki .page h1, .dokuwiki ul.toc li.level1 {counter-reset: level2;} .dokuwiki .page h2, .dokuwiki ul.toc li.level2 {counter-reset: level3;} .dokuwiki .page h3, .dokuwiki ul.toc li.level3 {counter-reset: level4;} .dokuwiki .page h4, .dokuwiki ul.toc li.level4 {counter-reset: level5;} .dokuwiki .page h5, .dokuwiki ul.toc li.level5 {} .dokuwiki .page h1:before, .dokuwiki ul.toc li.level1 a:before { content: counter(level1) " "; counter-increment: level1; } .dokuwiki .page h1.sectionedit1:before, .dokuwiki ul.toc li.level1:first-child a:before { content: none; } .dokuwiki .page h2:before, .dokuwiki ul.toc li.level2 a:before { content: counter(level1) "." counter(level2) " "; counter-increment: level2; } .dokuwiki .page h3:before, .dokuwiki ul.toc li.level3 a:before { content: counter(level1) "." counter(level2) "." counter(level3) " "; counter-increment: level3; } .dokuwiki .page h4:before, .dokuwiki ul.toc li.level4 a:before { content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) " "; counter-increment: level4; } .dokuwiki .page h5:before, .dokuwiki ul.toc li.level5 a:before { content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) "." counter(level5) " "; counter-increment: level5; }
Rationale for edit
I use several h1
s in my wiki so it doesn't “steal” one level from my TOC. I use the first h1
as the title of the page which I don't want to be numbered.
Drawbacks
- If you have only one
h1
and useh2
, it will be numbered0.1
in the document and not numbered at all in the TOC
In this case, you may use this variant of the CSS file (tested on Bootstrap3 theme)
- userstyle.css
.dokuwiki .page {counter-reset: level1;} .dokuwiki #dw__toc:before, .dokuwiki #dw__toc:after {counter-reset: level1; content: "";} .dokuwiki #dw__toc h3:before{content: ""} .dokuwiki .page h1, .toc-body ul.toc li.level1 {counter-reset: level2;} .dokuwiki .page h2, .toc-body ul.toc li.level2 {counter-reset: level3;} .dokuwiki .page h3, .toc-body ul.toc li.level3 {counter-reset: level4;} .dokuwiki .page h4, .toc-body ul.toc li.level4 {counter-reset: level5;} .dokuwiki .page h5, .toc-body ul.toc li.level5 {} .dokuwiki .page h1:before, .dokuwiki ul.toc li.level1 a:before { content: counter(level1) ". "; counter-increment: level1; } .dokuwiki .page h1.sectionedit1:before, .dokuwiki ul.toc li.level1 a:before { content: none; } .dokuwiki .page h2:before, .dokuwiki ul.toc li.level2 a:before { content: counter(level2) ". "; counter-increment: level2; } .dokuwiki .page h3:before, .dokuwiki ul.toc li.level3 a:before { content: counter(level2) "." counter(level3) ". "; counter-increment: level3; } .dokuwiki .page h4:before, .dokuwiki ul.toc li.level4 a:before { content: counter(level2) "." counter(level3) "." counter(level4) ". "; counter-increment: level4; } .dokuwiki .page h5:before, .dokuwiki ul.toc li.level5 a:before { content: counter(level2) "." counter(level3) "." counter(level4) "." counter(level5) ". "; counter-increment: level5; }
Alternative
This may have been better achieved by using the PageTitle Plugin and the original style here, but then I would have to manually rename each page of my wiki.
The combo plugin used also a CSS approach with configuration