#1

image
image2762×1516 512 KB

Hi all,
Is there a way to make the list indent deeper in editor mode, kind of similar to how it renders in preview mode? Its a bit hard to read in editor mode since the successive indents are so close to each other.

With my amateur CSS skills, I tried looking into it, but it looks like the program assigns the indent to the line through inline CSS as the text is typed. Or am I missing something?

image
image878×188 56.3 KB

Further help with line spacing in Edit Mode
#2

+1 interested in the answer to this

1 Like
#3

You can override the inline css by placing !important next to your CSS rules. So for example:

.cm-s-obsidian pre.HyperMD-list-line {
  padding-left: 25px !important;
}
1 Like
#4

This worked! don’t know why I didn’t think of that.
(note: this breaks relationship lines in editor mode, but tbh the deeper indents makes them not as necessary anyway)

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

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

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

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

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

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

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

.cm-s-obsidian pre.HyperMD-list-line-8{
  padding-left: 230px !important;
}
1 Like
Setting for indent width for lists in editor
#5

this is great, thank you!

@ishgunacar i have this right above your code and it keeps the relationship lines in editor, though it’s stumpy & doesn’t go all the way down as in preview mode…

.cm-hmd-list-indent .cm-tab, ul ul { position: relative; }
.cm-hmd-list-indent .cm-tab::before, ul ul::before {
 content:'';
 border-left: 1px solid rgba(0, 122, 255, 0.25);
 position: absolute;
}
.cm-hmd-list-indent .cm-tab::before { left: 0; top: -5px; bottom: -4px; 
}
ul ul::before { left: -11px; top: 0; bottom: 0; 
}
1 Like