HHH - HierarchyHighlightHeadings Theme

Plugs and Libraries
1

HHH Theme

Having delved into tree-based file systems and tree-UI heading picker, wouldn’t it be intriguing to experiment with a tree-like hierarchically highlighted heading theme as well?

The title (that cursor’s @) and its subtitles are highlighted

This JS-adopted plug shares some insights from @Mr.Red’s JS injection tech, @malys’s theme and @Thaurin’s plug’s event.listen.

There is also a pure CSS-version that requires no installation; however, its highlighting affects the child headings of other sibling headings — a limitation intrinsic to CSS that can be addressed with JavaScript.

This plug works in light theme (and mobile), too, but less attractive.

Meet other themes

1 Like
2

This is so awesome i definitely would use this!

I hope you don’t mind, but I took the liberty and tweaked the colors and hover effect a little bit to be more pronounced. here is the result:

i would also recommend (was recommended me too by @mjf ) to use oklch() colors instead of rgb(), or #RGB colore. they’re more predictible and easier manipulable.

1 Like
3

Never mind, let’s blend: Just as in《Annihilation》and《Prometheus》, where all forms of life fuse through the blending of DNA, so too do human and AI interweave within the code. :dotted_line_face:

Incidentally, Treeview Extension to Drag & Resize might also benefit from below: ?

event.listen {
  name = 'system:ready',
  run = function(e)
    editor.invokeCommand "Tree View: Toggle"
    js.import("/.fs/Library/PanelDragResize.js").enableDrag()
  end
}

Additionally, I find that 2 plugs will be affected by your css hack:)

Is it time to fully implement this ?

1 Like
4

Like i say before, every contribution improve code and at the end, SB ecosystem is richer than ever and plugs quality is increasing.

Please share and publish your code, use friendly licence=> ecosystem stimulation.

@ChenZhu-Xie awesome plug

2 Likes
5

Update

  • HHH theme now highlights (grand)parent & (grand)children headings at the same branch.
  • Cursor don’t have to be @ headings (to trigger highlighting). They could be anywhere (inside SB editor).

Add feature: Pinned Headings

A proof-of-concept for Part 2 mentioned in ABC - Adaptive Bread Crumb - #2 by ChenZhu-Xie

another In-Page breadcrumb that shows which branch of the page contains the content you’re editing or viewing. Like Excel’s freeze panes, the script traces the heading chain from the cursor’s text block (parent, grandparent, and so on) up to the top-level heading, and mirrors those headings into the editor’s upper-left corner.

  • Those mirror headings sit visually on top but permit mouse passthrough so the underlying text remains editable. However, this make the In-Page breadcrumb not-navigatable, so one still need some In-Page or Across-Pages Heading Picker to navigate among headers.
  • Because it’s an entire front-end logic, it inherits CodeMirror’s limitations and cannot reach headings that are too distant from the active focus.

TEST

Code

see github.