For Theme Designers: Add cssclass for the current word

Use case or problem

A css class for the current word (the word under the cursor) would open up some new avenues for theme design. For example highlighting the current line in the visual sense. .cm-active only enables highlighting the current line the sense of a block, with line-wrapping .cm-active practically means “highlight the current paragraph”. Having active line highlighting instead of active paragraph highlighting would bring Obsidian closer to the visuals of a code editor.

Another feature enabled would be more precise active-line indicators in the gutter. A css class for active words could also be utilized for a focus mode / zen mode by themes or plugins.

Proposed solution

Add something like .word-under-cursor as a cssclass.

Current workaround (optional)

  • Currently, I implemented a hacky workaround for using cm-cursor::before, which has the drawback that horizontal scrolling needs to be disabled for it (since the cursor is not located in the editor but in the cursor layer, other solutions do not work well.)
  • Another way to do it is using the Highlight current word plugin from @NothingIsLost, which however, would require users to install a dependency for a theme.
1 Like