Help needed: Highlight Active Relationship Line

[Chinchivi]

Hi there. I wonder whether it is somehow possible to integrate the following into Obsidian:

1. To highlight the current line I’m writing on.
2. When outlining: To also highlight the currently active relationship line as seen in the screenshots.

This functionality would be super handy and provide a lot of visual clarity; especially when outlining. Maybe this can be achieved by css? Or there is already a theme or plugin which supports it? Help is needed, as I’m (unfortunately) completly ignorant of css and could not find a related topic in the forum.

Best, and thanks, and looking forward to your ideas!

[Chetachi]

Hello!! @EleanorKonik shared your post in the Discord so I thought I’d share a snippet! Now I’m not sure what your css looks like for your relationship lines but this should still help.

.cm-hmd-list-indent > .cm-tab:after{
    content: "";
    display: block;
    position: absolute;
    opacity: .35;
    top: .25em;
    left: .5em;
    border-left: 1px solid var(--text-faint);
    height: 100%;
}

.CodeMirror-activeline-background{
  background-color: #e3e7ef;
}

.CodeMirror-activeline .cm-hmd-list-indent > .cm-tab:after{
  border-left: 4px solid #0000ff;
}

[Chinchivi]

Oh, thank you for sharing. Also, I tested out the snipped and it is really nice. My css for relationship lines looks as follows:

/* folder relationship lines */

.nav-folder-children .nav-folder-children {
  margin-left: 20px;
  padding-left: 0;
  border-left: 1px solid rgba(118,158,165,0.2);
  border-radius: 4px;
  transition:all 0.5s ease-in-out;
}
.nav-folder-children .nav-folder-children:hover {
  border-left-color: rgba(118,158,165,0.4);
}

/* bullet point relationship lines */ 

.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;
}

I should mention, that it is - what funny coincidence - taken from @EleanorKonik. (But I can’t remember when and from where exactly ) Also, I should mention that the above shared screenshots stem from Light Theme in RemNote, done by eustachio.

Anyway - a next question. Now, how do I insert the snippet into my css for relationship lines?

When I activate the snippet you shared and the css-file for relationship lines at the same time, it looks like this:

When I only activate the snippet you shared, some relationship lines are missing and it looks like this:

Otherwise it is pretty, awesomely sweet!

Ok, maybe you can help me out on the short run? (For the future, I’ll definetly look into some css tutorials.)

And: Thanks!

[Chetachi]

This will work much better for you current snippet!

.CodeMirror-activeline-background {
  background-color: #e3e7ef;
}

.CodeMirror-activeline .cm-hmd-list-indent .cm-tab::before,
.CodeMirror-activeline .cm-hmd-list-indent ul ul::before {
  width: 3px;
  bottom: -2px;
  background-color: #0000ff;
}

[Chinchivi]

Oho! This looks nice. Thank you very much!

[Chinchivi]

Ok, I now fiddled around with the colors and it looks very nice and overall, works like a breeze. So glad!
But maybe - sorry to bother you once again - you can help me out with an additional issue. How can I achieve that only the innermost relationship line shows a thicker line? (compare the screenshots → where the circles are) Unfortunately, I’m just beginning to dive into css.

[Chetachi]

That’s easy! You can use the last-child pseudo class to represent the last element in a group of many of that same element. Simply modify the snippet I shared above with this:

.CodeMirror-activeline .cm-hmd-list-indent .cm-tab:last-child::before,
    .CodeMirror-activeline .cm-hmd-list-indent ul ul:last-child::before {
      width: 3px;
      bottom: -2px;
      background-color: #0000ff;
    }

[andrezgz]

That’s awesome.

Do you know how can I apply it when using spaces instead of tabs? The .cm-tab class is not present on the editor view

[Chinchivi]

Well, yes, that’s amazing. Definitely works. It now looks like this:

The only issue I have now, is that if the bullet point I’m currently at - now referenced and highlighted by the active relationship line - has more than one line, the relationship line does not reach the ‘bottom’ of the block - as shown in the screenshot. Otherwise it really works like a charm.

I bow before your skills! No, seriously: thank you.

Edit: Should I remove the ‘solution’-label so that we can have this topic open a little while longer?