Setting for indent width for lists in editor

Feature requests
1

I’d like to be able to specify the indent width inside the markdown editor. I type a deeply nested lists with very short items and it ends up very hard to tell what indent level I’m at.

image

The relevant css class seems to be .HyperMD-list-line, but it looks like obsidian adds an absolute padding-left, which doesn’t seem user-configurable.

Many thanks! Awesome app!

5 Likes
2

I kinda got it to work with this css

.cm-hmd-list-indent > .cm-tab {
  margin-left: 20px;
}

(don’t really know how it works, just copied a chunk I found when searching for HyperMD-list-line)

Problem now is the lines that are wrapped around have weird indent and I don’t know how to fix. Similar issue to this Indent wrapped lines within nested lists in edit more

Edit: After switching from tabs to spaces for lists, the css no longer works

2 Likes
3

Whoa, this worked! I have no idea how because I can’t even find these class names being used in the html.

4

Old post, but for those who find this via google debugging :slight_smile: (like me)

While using Obsidian, if you press CTRL-SHIFT-I (option-cmd-i for mac) then it will bring up the developer window.

See more: Getting comfortable with Obsidian CSS

5

Note: the solution posted here does not seem to work for me. I had to edit the solution in this post: How to make list indents deeper in editor mode? - #4 by ishgunacar

To get:

.HyperMD-list-line.HyperMD-list-line-1 {
  padding-left: 20px !important;
}

.HyperMD-list-line.HyperMD-list-line-2 {
  padding-left: 50px !important;
}

.HyperMD-list-line.HyperMD-list-line-3 {
  padding-left: 80px !important;
}

.HyperMD-list-line.HyperMD-list-line-4{
  padding-left: 110px !important;
}

.HyperMD-list-line.HyperMD-list-line-5 {
  padding-left: 140px !important;
}

.HyperMD-list-line.HyperMD-list-line-6 {
  padding-left: 170px !important;
}

.HyperMD-list-line.HyperMD-list-line-7 {
  padding-left: 200px !important;
}

.HyperMD-list-line.HyperMD-list-line-8{
  padding-left: 230px !important;
}

Works with live preview too (very happy to see that feature btw!)

2 Likes
6

I pasted this code and it works perfectly, but when I quit the application my modifications to app.css go away. How do I make my changes permanent?

7

You probably need CSS snippets

8

Thanks, that worked!