Vertical lines for indents

In long notes vertical lines for indents would be great. So that someone can know where in indentation we are. This happens in roam research and many IDEs

28 Likes

that is a good idea, I tried to do it in CSS in the current editor but it doesn’t keep track of indent below the first one so it isn’t super useful. I think we would need a plugin or wait for the WYSIWYG editor

1 Like

Would love to have this feature; it’ll really help me make sense of my nested lists better

1 Like

Plus one on this one! This would make a HUGE difference for me… I have a bunch of big lists and it’s hard to read em at the moment. Thanks for posting this request!

2 Likes

Yeah, this is a thing I loved about Workflowy. I created a Workflowy clone, so maybe I can see if I can implement this in my css. I’ll post if I have success

2 Likes

Here’s the Result:

Here’s the CSS:

/* ----------------- */
/* List guides CSS */
.cm-hmd-list-indent > .cm-tab {
  border-left: 1px solid rgba(33, 33, 33, 0.8); // The color could be var(--text-faint) or similar
  margin-left: 3px;
}

.cm-s-obsidian pre.HyperMD-list-line {
  padding-top: 0 !important;
  min-height: 1.8em;
}

.cm-s-obsidian pre.HyperMD-list-line > span * {
  padding-top: 0.61em !important;
}

That being said, it could be made better if the HTML was slightly better, or I spent longer than the 20 minutes I did on it.

11 Likes

Good for keeping track of my notes! Thumbs Up to you, good sir.

1 Like

@anshbansal Let me know if this works for you. Maybe @Silver can take this change and improve it :wink:

This looks good. However, I am currently not using Obsidian full time so cannot give any feedback on how this actually works out. I am sure there are others who want this feature. Maybe they can give the feedback.

The CSS @anthonybullard supplied works great; if you’re indenting with tabs, not spaces. I’ve logged a bug with space-indented files not being able to have this applied. (rf Editor: inconsistent code with tabs vs spaces)

1 Like

I use solution posted in Theme: obsidian-pisum (Dark)
For beginners it would be nice to have indentation guides visible by default, suppressible by single checkbox in settings.
Otherwise I would consider this request solved. The bug↑ can be solved independently.

Related request: Improving visibility of caret(cursor) position in editor mode

This is super helpful, thanks for the contribution. One addition that would make it even better is using different colors for each level of indentation. I tried to play a little with your snippet but wasn’t able to figure it out (just beginning to use Obsidian). Thanks again!

2 Likes

I just downloaded thee LYT Kit and saw the vertical lines:

I’m not a coder or a geek. What’s the best way in February 2021 to add such line to one’s Obsidian? Is there a plugin or special setting? Else?

5 Likes

These CSS methods no longer appear to work after the Live Preview update, probably because CSS classes like .cm-tab were removed. Could this be officially brought into Obsidian than rely on third-party solutions?

2 Likes

It would be awesome if this is part of the Core Plugin setting.

Also, I can confirm that none of the solutions mentioned above does not work for me in Obsidian 0.13.19

Take a look at this fairly new plugin : mgmeyers/obsidian-indentation-guides. It does exactly what you want and much better than the CSS I tried before. Also very easy to set up and works with the new Live Preview. Would recommand 10/10.

2 Likes

very cool! thank you

1 Like