-1

I generate an HTML document using Python Markdown.
The Table of Content is embedded inside a toc class.

I would like the list to be numbers:

1. Subject 001
1.1. Sub Subject 001
1.2. Sub Subject 002
2. Subject 002
2.1. Sub Subject 001
2.2. Sub Subject 002
2.2.1. Sub Sub Subject 001
2.2.2. Sub Sub Subject 002
3. Subject 003
3.1. Sub Subject 001
3.2. Sub Subject 002

So it basically needs to take into accounting the nesting ul and li elements.

I looked at Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css?
I came up with:

.toc ul { counter-reset: outItem; list-style: none }
.toc ul > li{ counter-reset: nestedItem }
.toc ul > li:before { content: counters(outItem, ".") ". "; counter-increment: outItem; margin-left: -2em; }

Yet I'm not sure it will support any number of nesting.
Is there a more correct to do so?

Royi
  • 4,640
  • 6
  • 46
  • 64
  • Does it work? If not, post a more complete set of source and state how it doesn't work. – Kevin May 22 '21 at 21:41
  • @Kevin, It worked on my simple test case. Yet I'm not sure even what I did or on the scope of the counters hence I'd be happy for an expert solution. – Royi May 22 '21 at 22:01

1 Answers1

0

I have this solution so far:

.toc ul { counter-reset: ulItem; list-style: none }
.toc ul > li:before { content: counters(ulItem, ".") ". "; counter-increment: ulItem; margin-left: -2em; }
Royi
  • 4,640
  • 6
  • 46
  • 64