Making the (text) cursor more noticeable

I’m not sure how it’s currently drawn, but the tiny one pixel wide cursor is very hard to see.

I would like the option to configure the cursor to be wider and also taller. (The color can already be configured, as far as I understand.)

My use case for this is actually Obsidian, which recently (as far as I know) switched to CodeMirror native cursor, and the low visibility really bothers my everyday writing. But I’m sure this would be very useful everywhere. Cursor visibility customization options are a standard (code) text editor feature after all.


A single pixel (in fact 1.2px in CodeMirror) seems a common thing across applications. But you can change the styling for .cm-cursor elements to give it a wider left border if you want it to be wider. The height is determined by the text height at its position, though I suppose you could force it to be higher by adding vertical padding if you can make sure it doesn’t stick out into the next line somehow.

Thank you! I’ll dig up the documentation about .cm-cursor and see if I can access it from Obsidian :slight_smile:

At least Sublime Text and VS Code have a fatter cursor, and also prose/Markdown writing apps like iA Writer. Plus the default iOS system cursor is fatter. Yes, the thin old system cursor is still the OS default (on Mac at least), but I think it’s an objective fact that a 2-3 pixel wide cursor is easier to see than approximately one pixel, never mind what the default is :slight_smile:

What you prefer is subjective of course, but in my opinion the one (ish) pixel cursor works less well these days with very high resolution screens. How well it fits of course also depends on how loose the kerning of your font is, but usually coding (monospace) fonts are very loose so they can fit the ‘m’ and ‘w’.

So yeah, just my personal preference, but it’s good to hear it should be possible to tweak it! Once you’re used to a more visible cursor, it’s difficult to go back :slight_smile:

Hello again… I can’t find documentation about this. Could you point me to somewhere, maybe even an example? :slight_smile:

There is an overview of the CodeMirror dom tree in the “Things you can Style” section here: CodeMirror Styling Example

Have you tried adding styles for the .cm-cursor element?

Inspecting the styles in chrome devtools it looks like the default for .cm-cursor are border-left: 1.2px solid black; margin-left: -0.6px;. Overriding those two with your own should give you any thickness you want.

Thanks for the suggestion, but it doesn’t seem to do anything :-/ This may be down to Obsidian’s implementation.

This may be down to Obsidian’s implementation.

You’re probably right. Maybe there is some way to do it in a theme/plugin for Obsidian. In which case there is probably more help to get on their forum.

Yeah, thank you. I have participated in the thread about the feature request. There is one plugin that draws a new customizable cursor on top of the CodeMirror one (which you can then make invisible), but it doesn’t always work quite right… and frankly feels a bit ridiculous :stuck_out_tongue: