Add CSS classes to differentiate headings in note outline

Lias · November 14, 2024, 7:04pm

Add CSS classes to differentiate headings in note outline

Use case or problem

Having a class inside .tree-item-self elements in the note outline section that specifies if it is referencing an h1, h2, h3, and so on, will make it so that a theme/plugin developer could easily target them depending on if they are referencing a h1, h2, h3, …

This means that, for example, a theme developer could make it so that the .tree-item-self element has the same color/font-weight/font-size as the heading that it references.

This is exactly what I am trying to achieve with my theme Simply Colorful (example image below):

Notice how I cannot make it so that the “Why Simply Colorful? (H4)” heading, which in the note is colored red because it is an h4, has that same red color in the note outline section.

Instead it appears pink because I explicitly made it so that if a heading is nested 2 times (which usually means it is a h3) it should appear pink.

The same happens with the “Disclaimer (H6)” h6, which in the note is yellow, but in the note outline section is also pink, and with the “Overview (H3)” h3, which in the note is pink, but in the note outline section is purple (the color used for h2).

Proposed solution

My proposed solution is to add a class to .tree-item-self elements to make the heading that they are referencing explicit.

In the following example the classes .is-h1 and .is-h3 were added:

<div class="tree-item">
    <div class="tree-item-self is-clickable is-h1" draggable="true" style="margin-inline-start: 0px !important; padding-inline-start: 24px !important;">
        ...
    </div>
    <div class="tree-item-children" style>
        <div class="tree-item">
            <div class="tree-item-self is-clickable mod-collapsible is-h3" draggable="true" style="margin-inline-start: -17px !important; padding-inline-start: 41px !important;">
                ...
            </div>
        </div>
    </div>
</div>

Maybe the addition of this classes could be made by the script that reads the note, generates the outline and add the style attribute to the .tree-item-self elements (I mean these style attributes: style="margin-inline-start: ...; padding-inline-start: ...;").

Current workaround (optional)

The only workaround that exists (I believe) is to do what I have done in the image, and that is to check how nested the .tree-item-self is, and assume that this value corresponds to the correct type of heading.

Example:

if it is not nested → it is an h1
if it is nested 1 time → it is an h2
if it is nested 4 times → it is an h5

(I hope that my explanation was clear, and if not, feel free to ask for clarifications).

DiCaver · November 14, 2024, 7:13pm

Great idea! It is a nicely written feature request!

When making this snippet … [Snippet] Obsidian Seasonal Header Palette … I mentioned precisely the same problem.

Levels in side Outline panels are not colored by heading level. This is a limitation of Obsidian’s tree hierarchy. If your note will have all 6 heading levels, the Outline panel will show them all in the appropriate color. If not, than top levels will be colored according to the highest level of palette and so on.

So tump up for this request!

Cheers, Marko