How do I change background color of highlighted text in code editor?

Support
1

Can someone share what to put into, presumably, userchrome.css to change background color of highlighted text in the markdown editor view?

Thanks in advance.

2

To change the background colour of search highlighted text in the CodeMirror editor try this in userchrome.css,

 .cm-search-marker {
       background: lightpink !important;
}
 .cm-search-marker.cm-search-marker-selected {
       background: red !important;
}
3

Thank you. That works perfectly with search. I am looking for the same effect but when I manually highlight text. In Joplin's Dark theme, selected text in the code pane has a gray background that is difficult for me to distinguish from other text. I would like to make the background blue as in the rendered pane.

4

OK. I now see what you mean. Try:

 .CodeMirror-selected {
	/* selected text */
	 background: #0663d3 !important;
}
1 Like
5

Worked perfectly. Thanks again.

In the spirit of teach a man to fish, can you point me to where you found the css class names?

6

I used the Development Tools built into Joplin. I then highlighted some editor text and "probed it" looking for a suitable class. They are not always easy to find.

By the way, when trying to tweak parts of Joplin you may find a class that seems to control the bit you want to change but it has a weird name like UVbgHt or LkYmvd. Resist the temptation to use these as they are machine generated and will most likely change when a new version is built.

2 Likes
7

I find it difficult to determine if text in codeblock is selected, regardless of my chosen color for selected text.

It seems that text selection is on the layer below the codeblock background. Is there a way to make codeblock backround transparent so text selections within them become more visible? Or does anyone have recommendations for good color combinations?

I think the relevant class is this:
.span.cm-comment.cm-jn-inline-code

8

That was a bug introduced in version 2.3.5. It's been fixed for the next release. For now i don't think there's much you can do with the CSS aside from just removing the code blocks backgrounds entirely. The other option is to manually install the current pre-release.

9

Thanks. I am running 2.3.5 and will wait for the next release, then.