Less Obvious Line Numbers in the Editor to Get More Focused

[YuTang]

(English is not my native language so it is a little bit hard for me to thoroughly explain my thoughts here, but I’ll try my best to make it clear. Please forgive me for my poor English! )

I enable line numbers to take advantage of the robust function of the plugin Drag and Drop Block. But I believe that many other users who enable line numbers as well feel a bit bothered due to its visual redundancy as much as I do. I mean the design of this UI element may appear a little redundant, and it distracts the attention of users from time to time. Personally, I think it may be better if it’s redesigned to look less obvious. For example, I suppose it can be put a little farther from the texts and the body of the editor. And also the color of it can be dimmer and more transparent, just like that of Ulysses.(Here I’ll post a photo to draw a comparison)

All in all, I do hope you can take my advice into consideration~

[Craig]

Hi YuTang,

I use the following CSS to make my line numbers fainter:

/* Very faint line numbers (cm5) */
.cm-s-obsidian div.CodeMirror-linenumber {
    color: var(--text-faint);
    filter: brightness(140%);
}

/* Very faint line numbers (cm6) */
.markdown-source-view.mod-cm6 .cm-gutterElement {
    color: var(--text-faint);
    filter: brightness(140%);
}

To make them further from the text I suppose you could add padding-right: 3em; or something similar.

[YuTang]

Thanks for your reply!! I know nothing about programming and have never changed CSS before. Could you please give me more instructions on how to change it? Thank you once again!

[davecan]

In your vault folder (using windows explorer / Mac finder / etc) go into the folder .obsidian/snippets and create a plain text file there called less-obvious-line-numbers.css or whatever you want to call it as long as it ends in .css.

Then paste in the CSS snippet above. Save the file.

Then go into Obsidian and in the settings click on Appearance and then under the section labeled CSS Snippets find less-obvious-line-numbers and toggle the button on.

It should take effect immediately.

[YuTang]

Thank you so much, it does work now!