Thanks to visit codestin.com
Credit goes to github.com

Skip to content

TOC level indentation #14898

@jmooring

Description

@jmooring

I'm not convinced that #14873 was the right way to address #7128. While the visual results of the integration tests are pleasing to the eye, the Markdown in those tests is overly simple.

But with this Markdown:

## L2

#### L4

### L3

## L2 (again)

You get this:

Image

In the above, note that the level 3 heading and the level 4 heading are at the same visual level; that doesn't make sense to me.

Although not particularly pleasing to the eye, I think the desired rendering is this:

Image

The screen capture above was produced with v0.161.1 with this CSS:

/* 1. Ensure items with links always behave like standard list items */
#TableOfContents li:has(> a) {
  display: list-item;
}

/* 2. Remove the marker from LIs that don't have a direct link */
#TableOfContents li:not(:has(> a)) {
  display: contents;
}

/* 3. Maintain indentation for nested lists inside the "markerless" LIs */
#TableOfContents li:not(:has(> a)) > ul,
#TableOfContents li:not(:has(> a)) > ol {
  display: block;
  padding-left: 40px; /* Standard browser indentation */
  margin-block: 0;    /* Prevents awkward vertical gaps */
}

In addition to "level accuracy", this has the added benefit of visually indicating that the Markdown headings increment by more than one level at a time, which happens to be the first validation rule in
github.com/DavidAnson/markdownlint.

Anyone using different heading levels to change the styling should be using CSS instead.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions