Obsidian live-preview list threading and highlight

README.md

Obsidian live-preview list threading and highlight

Obsidian forum thread: https://forum.obsidian.md/t/plugin-for-bullet-threading/37317/22

Add these CSS files in Appearance settings.

Changelog:

• 2023-10-02
  • highlight snippet
    • halved the alpha, making highlight more subtle
    • made 6th color a bit more distinct from 5th
  • threading snippet
    • removed accidental dependency on another CSS snippet
    • adjusted offsets to better match indentation lines with the default font size
    • using --list-indent variable to hopefully make the snippet more compatible with styles that alter it
    • providing height calculations that prioritize wrapped text over images (or any other oversized inline content with default vertical alignment) - requires manual edits in 3 places to switch

bullet-list-live-preview-highlight.css

.HyperMD-list-line-1:hover,
.HyperMD-list-line-1:not(:has(~ .HyperMD-list-line-1 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-2, .HyperMD-list-line-3, .HyperMD-list-line-4, .HyperMD-list-line-5, .HyperMD-list-line-6):hover) {
  background-color: hsl(23, 100%, 45%, 0.05);
}

.HyperMD-list-line-2:hover,
.HyperMD-list-line-2:not(:has(~ .HyperMD-list-line-2 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-3, .HyperMD-list-line-4, .HyperMD-list-line-5, .HyperMD-list-line-6):hover) {
  background-color: hsl(46, 100%, 45%, 0.05);
}

.HyperMD-list-line-3:hover,
.HyperMD-list-line-3:not(:has(~ .HyperMD-list-line-3 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-4, .HyperMD-list-line-5, .HyperMD-list-line-6):hover) {
  background-color: hsl(70, 100%, 45%, 0.05);
}

.HyperMD-list-line-4:hover,
.HyperMD-list-line-4:not(:has(~ .HyperMD-list-line-4 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-5, .HyperMD-list-line-6):hover) {
  background-color: hsl(105, 100%, 45%, 0.05);
}

.HyperMD-list-line-5:hover,
.HyperMD-list-line-5:not(:has(~ .HyperMD-list-line-5 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-6):hover) {
  background-color: hsl(187, 100%, 45%, 0.05);
}

.HyperMD-list-line-6:hover {
  background-color: hsl(223, 100%, 55%, 0.05);
}

bullet-list-live-preview-threading.css

.HyperMD-list-line-1:not(:has(~ .HyperMD-list-line-1 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5, .HyperMD-list-line-4, .HyperMD-list-line-3, .HyperMD-list-line-2):hover)::after,
.HyperMD-list-line-1:not(:has(~ .HyperMD-list-line-1 ~ .HyperMD-list-line:hover)) ~ .HyperMD-list-line:has(~ .HyperMD-list-line-2:hover, ~ .HyperMD-list-line-2 ~ :is(.HyperMD-list-line-3, .HyperMD-list-line-4, .HyperMD-list-line-5, .HyperMD-list-line-6):hover)::before,
.HyperMD-list-line-2:not(:has(~ .HyperMD-list-line-2 ~ .HyperMD-list-line:hover)):is(:hover, :has(~ :is(.HyperMD-list-line-3, .HyperMD-list-line-4, .HyperMD-list-line-5, .HyperMD-list-line-6):hover))::before {
  --list-threading-color: hsl(23, 100%, 45%, 0.3);
  --list-threading-offset: calc(5px + 0.15em);
}

.HyperMD-list-line-2:not(:has(~ .HyperMD-list-line-2 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5, .HyperMD-list-line-4, .HyperMD-list-line-3):hover)::after,
.HyperMD-list-line-2:not(:has(~ .HyperMD-list-line-2 ~ .HyperMD-list-line:hover)) ~ .HyperMD-list-line:has(~ .HyperMD-list-line-3:hover, ~ .HyperMD-list-line-3 ~ :is(.HyperMD-list-line-4, .HyperMD-list-line-5, .HyperMD-list-line-6):hover)::before,
.HyperMD-list-line-3:not(:has(~ .HyperMD-list-line-3 ~ .HyperMD-list-line:hover)):is(:hover, :has(~ :is(.HyperMD-list-line-4, .HyperMD-list-line-5, .HyperMD-list-line-6):hover))::before {
  --list-threading-color: hsl(46, 100%, 45%, 0.3);
  --list-threading-offset: calc(5px + 0.15em + var(--list-indent));
}

.HyperMD-list-line-3:not(:has(~ .HyperMD-list-line-3 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5, .HyperMD-list-line-4):hover)::after,
.HyperMD-list-line-3:not(:has(~ .HyperMD-list-line-3 ~ .HyperMD-list-line:hover)) ~ .HyperMD-list-line:has(~ .HyperMD-list-line-4:hover, ~ .HyperMD-list-line-4 ~ :is(.HyperMD-list-line-5, .HyperMD-list-line-6):hover)::before,
.HyperMD-list-line-4:not(:has(~ .HyperMD-list-line-4 ~ .HyperMD-list-line:hover)):is(:hover, :has(~ :is(.HyperMD-list-line-5, .HyperMD-list-line-6):hover))::before {
  --list-threading-color: hsl(70, 100%, 45%, 0.3);
  --list-threading-offset: calc(5px + 0.15em + 2 * var(--list-indent));
}

.HyperMD-list-line-4:not(:has(~ .HyperMD-list-line-4 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5):hover)::after,
.HyperMD-list-line-4:not(:has(~ .HyperMD-list-line-4 ~ .HyperMD-list-line:hover)) ~ .HyperMD-list-line:has(~ .HyperMD-list-line-5:hover, ~ .HyperMD-list-line-5 ~ :is(.HyperMD-list-line-6):hover)::before,
.HyperMD-list-line-5:not(:has(~ .HyperMD-list-line-5 ~ .HyperMD-list-line:hover)):is(:hover, :has(~ :is(.HyperMD-list-line-6):hover))::before {
  --list-threading-color: hsl(105, 100%, 45%, 0.3);
  --list-threading-offset: calc(5px + 0.15em + 3 * var(--list-indent));
}

.HyperMD-list-line-5:not(:has(~ .HyperMD-list-line-5 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-6):hover)::after,
.HyperMD-list-line-5:not(:has(~ .HyperMD-list-line-5 ~ .HyperMD-list-line:hover)) ~ .HyperMD-list-line:has(~ .HyperMD-list-line-6:hover)::before,
.HyperMD-list-line-6:not(:has(~ .HyperMD-list-line-6 ~ .HyperMD-list-line:hover)):is(:hover)::before {
  --list-threading-color: hsl(187, 100%, 45%, 0.3);
  --list-threading-offset: calc(4px + 0.15em + 4 * var(--list-indent));
}

/* tails */
.HyperMD-list-line-1:not(:has(~ .HyperMD-list-line-1 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5, .HyperMD-list-line-4, .HyperMD-list-line-3, .HyperMD-list-line-2):hover)::after,
.HyperMD-list-line-2:not(:has(~ .HyperMD-list-line-2 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5, .HyperMD-list-line-4, .HyperMD-list-line-3):hover)::after,
.HyperMD-list-line-3:not(:has(~ .HyperMD-list-line-3 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5, .HyperMD-list-line-4):hover)::after,
.HyperMD-list-line-4:not(:has(~ .HyperMD-list-line-4 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5):hover)::after,
.HyperMD-list-line-5:not(:has(~ .HyperMD-list-line-5 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-6):hover)::after {
  content: "";
  position: absolute;
  left: var(--list-threading-offset);
  bottom: 0;
  /* priority to wrapped text */
  height: calc(100% - 0.75em);
  /* priority to images */
  height: 0.8em;
  width: var(--size-2-1);
  background-color: var(--list-threading-color);
}
.HyperMD-list-line.HyperMD-task-line::after {
  /* priority to wrapped text */
  max-height: calc(100% - 1.3em);
  /* priority to images */
  max-height: 0.275em;
}

/* in-between lines */
.HyperMD-list-line-1:not(:has(~ .HyperMD-list-line-1 ~ .HyperMD-list-line:hover)) ~ .HyperMD-list-line:has(~ .HyperMD-list-line-2:hover, ~ .HyperMD-list-line-2 ~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5, .HyperMD-list-line-4, .HyperMD-list-line-3):hover)::before,
.HyperMD-list-line-2:not(:has(~ .HyperMD-list-line-2 ~ .HyperMD-list-line:hover)) ~ .HyperMD-list-line:has(~ .HyperMD-list-line-3:hover, ~ .HyperMD-list-line-3 ~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5, .HyperMD-list-line-4):hover)::before,
.HyperMD-list-line-3:not(:has(~ .HyperMD-list-line-3 ~ .HyperMD-list-line:hover)) ~ .HyperMD-list-line:has(~ .HyperMD-list-line-4:hover, ~ .HyperMD-list-line-4 ~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5):hover)::before,
.HyperMD-list-line-4:not(:has(~ .HyperMD-list-line-4 ~ .HyperMD-list-line:hover)) ~ .HyperMD-list-line:has(~ .HyperMD-list-line-5:hover, ~ .HyperMD-list-line-5 ~ :is(.HyperMD-list-line-6):hover)::before,
.HyperMD-list-line-5:not(:has(~ .HyperMD-list-line-5 ~ .HyperMD-list-line:hover)) ~ .HyperMD-list-line:has(~ .HyperMD-list-line-6:hover)::before {
  content: "";
  position: absolute;
  left: var(--list-threading-offset);
  top: 0;
  height: 100%;
  width: var(--size-2-1);
  background-color: var(--list-threading-color);
}

/* elbows */
.HyperMD-list-line-2:not(:has(~ .HyperMD-list-line-2 ~ .HyperMD-list-line:hover)):is(:hover, :has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5, .HyperMD-list-line-4, .HyperMD-list-line-3):hover))::before,
.HyperMD-list-line-3:not(:has(~ .HyperMD-list-line-3 ~ .HyperMD-list-line:hover)):is(:hover, :has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5, .HyperMD-list-line-4):hover))::before,
.HyperMD-list-line-4:not(:has(~ .HyperMD-list-line-4 ~ .HyperMD-list-line:hover)):is(:hover, :has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5):hover))::before,
.HyperMD-list-line-5:not(:has(~ .HyperMD-list-line-5 ~ .HyperMD-list-line:hover)):is(:hover, :has(~ :is(.HyperMD-list-line-6):hover))::before,
.HyperMD-list-line-6:not(:has(~ .HyperMD-list-line-6 ~ .HyperMD-list-line:hover)):is(:hover)::before {
  content: "";
  position: absolute;
  left: var(--list-threading-offset);
  width: var(--list-indent);
  top: 0;
  /* priority to wrapped text */
  height: calc(0.75em);
  /* priority to images */
  height: calc(100% - 0.825em - var(--size-2-1) / 2);
  border-bottom-left-radius: var(--radius-m);
  border-bottom: var(--size-2-1) solid var(--list-threading-color);
  border-left: var(--size-2-1) solid var(--list-threading-color);
}
.HyperMD-list-line.HyperMD-task-line::before {
  max-width: calc(var(--list-indent) - 0.35em);
}

Hi This is excellent! Thank you very much! However, I have an issue, it works fine if I use the mouse, but I am a Vim user, so I actually use vim motion with vim obsidian plugin. I think this snippet won't allow me to do the same thing with vim cursor. Especially in Vim normal mode.

@lasseeboe good question. And the answer is Yes!

Find and replace with your code editor of choice all :hover with .cm-active, and it seems to work nicely!

( Ctrl+H hotkey is typically used for the replace operation in many editors, please don't try to replace them one by one manually. I hope this is trivial enough, so I don't have to make a separate copy. )

I use the Vim plugin as well and it works perfectly with this change.

I actually use both the mouse hover version and the cursor version together.

That setup also mostly works. Although there are cases where it doesn't work perfectly. Like having the cursor and mouse on different items at the same sublist level, the vertical line is not proper. Maybe @KillyMXI, would you suggest any modifications to make it work better in that setup? (It'd also be very nice if these two could be made visually more different, like maybe dotted lines for one and solid lines for the other, but I suppose that requires more changes. Any comments there?)

Oh gosh.
I was thinking how to make a combined version that would follow either the keyboard cursor or mouse, giving priority to mouse.
Making separate threading for keyboard and mouse might be possible, will try to pull it off without compromises.
Quick answer: With a compromise of losing tails, it is certainly possible - one copy will use ::before, the other copy will use ::after pseudo-element.

Dotted lines may not work very well - each thread is composed of small fragments - there are going to be a lot of visual artifacts.
When there are two threads, I would rather assign each one a constant color regardless of depth. Assuming low alpha, two distinct enough hues may blend well enough to see how they overlap.
Other tools to distinguish them are line offset and thickness.