Add serial number for your table of content by pure css

Share & showcase
1

Feel free to copy the codes to your custom css. If you don’t know how to do that, see the official doc.

By the way, only the default theme has been tested.

version

obsidian v0.11.0

css

/* container of first layer headings. */
.outline {
  counter-reset: rootCounter;
}

.outline .tree-item .tree-item-self .tree-item-inner::before {
  content: counters(rootCounter, ".") ". ";
  counter-increment: rootCounter;
}

/* container of the ohter headings. */
/* NOTE: It is not .outline anymore. So we need a new counter */
.tree-item-children {
  counter-reset: innerCounter;
}

.tree-item-children .tree-item .tree-item-self .tree-item-inner::before {
  content: counters(rootCounter, ".") "." counters(innerCounter, ".") ". ";
  counter-increment: innerCounter;
}

preview

image
image233×774 14 KB

9 Likes
2

Nice idea! It doesn’t work like in your image, though: in my case, it shows the following outline:

1. xyz
    0.1 a
    0.2 b
        0.2.1 b1
        0.2.2 b2
3

My theme is default theme. Maybe the class name has been changed by other theme(I am not sure).

ctrl + shift + I open developer tool. Make sure the container class name is outline and the internal container class name is .tree-item-children.

4

I got the same problem.
I deleted the part of the snippet " List styling (numbering) for outline pane" and it work!

5

@pys: Thank you for this snippet!

6

Yay !! This is just what I had been waiting for. What amazes me is how simple the code is to achieve this. It works perfectly. Well done, and many thanks !

Is there a way to highlight in the table of contents the heading that is showing at the top of the screen? That would further improve navigation and being able to see whereabouts one is in a long document.

7

I don’t get it - where do you see this part in the snippet?

8

Do you use obuntu theme? Or applying other snippets for outline pane?
or using this snippet?
https://github.com/Dmitriy-Shulha/obsidian-css-snippets/blob/develop/Snippets/Outliner%20pane.md

9

3 times no…

10

Then im sorry, seems like this work in my case only.

11

this snippet from L28 to L81. He means that he deleted the part of the snippet from L28 to L81 I guess. The point is counter-reset: h1;, counter-reset: h2;… It’s going to conflict with our code

1 Like
12

Can not do that with pure css, javascript can. But it’s another topic.

13

@pys: OK, thanks for the feedback.