Why list item levels are missed in the reading mode?

Custom CSS & Theme Design
1

I’m not sure if it’s all about Obsidian or CodeMirror actually.

In the Source/Preview mode there are cm-list-${N} classes on list items which we can use to detect levels and apply styles depending on that.

But in the Reading mode all such classes are missed for some reason. It’s not very convenient because all style information based on levels gets missed and we have to style them again and in a messy way, sort of:

ul>li {
  /* style of level 1 (but in fact - for every level) */
}

ul>li>ul>li {
  /* style of level 2 (but in fact - for every second level) */
}

ul>li>ul>li>ul>li {
  /* style of level 3 (but in fact - for every third level) */
}

Wouldn’t it be better to preserve levels? Is it possible?

2

Reading mode is not based on CodeMirror so none of the Code Mirror classes are used. Styling for reading mode is very different from styling for live preview and source mode. It’s just the way things are for time being.

3

But is the process of converting Markdown to HTML manageable in some way? Can levels be actually added?

4

I’m not entirely sure what you mean with “can levels be actually added”, but CSS can indeed specify selectors to target various levels of lists, but it do get complicated quite fast.

Using selectors like > could be one way to partially do this, or to add qualifiers just on the outside of your list, so that you lock the beginning position from not being another list.

So there are a multitude of ways to discern various elements from each other using CSS, and I’m not the correct guy to explain the details of this. And finally, your use case is also much to vague for me to give a proper solution on how to specifically address your case in particular.