Improving visibility of caret(cursor) position in editor mode

Use case or problem

When there is a caret placed on large screen (4k, 43inch), then I do not know how to find it when e.g. switching from another app. I can just click elsewhere and hope that the sentence/idea in previous location was correctly finished. Also search highlights just the matched string which is sometimes narrow and hard to spot visually on big screen.

Proposed solution

I want to see position of caret easily by:

  • [ ] showing vertical guide. That is useful also for aligning tables,… in monospaced font or to supplement/complement indentation guides
  • [ ] showing horizontal guide for wrapped part of current line
  • âś“ Highlight current line in editor mode.
    Highlighting of instances of searched text should not be covered by it.

    (→solution)
  • [ ] Showing line number and column number e.g. in status bar. That is useful when navigating to the same position in another application.

It works e.g. in EmEditor:
image

Perhaps it could be done just by CSS, I do not know.

Current workaround

Edit: Solution given by @mano ↓ solved the most intrusive issue. Thanks.

Related request

2 Likes

you can highlight the active line using this css:

.workspace-leaf.mod-active .CodeMirror-activeline .CodeMirror-linebackground{
background-color: hsl(0, 0%, 0%);
}

you can also treat the active pane differently using this:

.mod-root .workspace-leaf.mod-active .markdown-source-view,
.mod-root .workspace-leaf.mod-active .markdown-preview-view {
  background-color: var(--background-active);  
}
1 Like

For beginners: If second piece of css code↑ does not have effect, then the --background-active variable needs to be defined, for example:

.theme-dark {
  --background-active: #253144; /* = #RRGGBB format */
}
.theme-light {
  --background-active: #FFFFEE;
}

Thanks for the CSS snippet.

I notice one situation where it is a bit buggy…

Tables vary in width, so can be narrower than the page, or expand horizontally (without wrapping or clipping) to be wider than the page.

But the activeline follows the width of the page, rather than the width of the table row.

I am not sure if anything can be done to improve this?

All of the solutions suggested are helpful, but in the end aren’t they all workarounds? I think macOS allows developers to control the caret appearance. iA Writer has a big, blue, thick caret, for instance. It would be great to make the cursor a tad thicker/bigger, even better if we had a simple choice between making it normal or emphasized. I know it could be a slippery slope, opening up requests for control over every aspect of the caret, but I think it’s pretty clear there are folks who find the standard cursor hard to see/find, so a simple design choice to “increase visibility of the caret” from the devs could be enough.

Wondering is this maybe a separate feature request?

1 Like