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

**URL:** <https://discourse.joplinapp.org/t/how-do-i-change-background-color-of-highlighted-text-in-code-editor/11620>\
**Category:** Support\
**Created:** [13 October 2020 02:05 UTC](https://discourse.joplinapp.org/t/how-do-i-change-background-color-of-highlighted-text-in-code-editor/11620 "2020-10-13T02:05:26Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![risk](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/risk/32/5566_2.png) [@risk](https://discourse.joplinapp.org/u/risk)\
**Post date:** [13 October 2020 02:05 UTC](https://discourse.joplinapp.org/t/how-do-i-change-background-color-of-highlighted-text-in-code-editor/11620/1 "2020-10-13T02:05:27Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dpoulton](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/dpoulton/32/29723_2.png) [@dpoulton](https://discourse.joplinapp.org/u/dpoulton)\
**Post date:** [13 October 2020 09:33 UTC](https://discourse.joplinapp.org/t/how-do-i-change-background-color-of-highlighted-text-in-code-editor/11620/2 "2020-10-13T09:33:36Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![risk](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/risk/32/5566_2.png) [@risk](https://discourse.joplinapp.org/u/risk)\
**Post date:** [13 October 2020 13:54 UTC](https://discourse.joplinapp.org/t/how-do-i-change-background-color-of-highlighted-text-in-code-editor/11620/3 "2020-10-13T13:54:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dpoulton](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/dpoulton/32/29723_2.png) [@dpoulton](https://discourse.joplinapp.org/u/dpoulton)\
**Post date:** [13 October 2020 15:42 UTC](https://discourse.joplinapp.org/t/how-do-i-change-background-color-of-highlighted-text-in-code-editor/11620/4 "2020-10-13T15:42:36Z")

</div>

OK. I now see what you mean. Try:

```css
 .CodeMirror-selected {
	/* selected text */
	 background: #0663d3 !important;
}

```

---

<div class="post-metadata">

**Author:** ![risk](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/risk/32/5566_2.png) [@risk](https://discourse.joplinapp.org/u/risk)\
**Post date:** [13 October 2020 15:46 UTC](https://discourse.joplinapp.org/t/how-do-i-change-background-color-of-highlighted-text-in-code-editor/11620/5 "2020-10-13T15:46:57Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![dpoulton](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/dpoulton/32/29723_2.png) [@dpoulton](https://discourse.joplinapp.org/u/dpoulton)\
**Post date:** [13 October 2020 16:37 UTC](https://discourse.joplinapp.org/t/how-do-i-change-background-color-of-highlighted-text-in-code-editor/11620/6 "2020-10-13T16:37:34Z")

</div>

I used the [Development Tools](https://discourse.joplinapp.org/t/custom-stylesheets/384/36) 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.

---

<div class="post-metadata">

**Author:** ![ahpl](https://avatars.discourse-cdn.com/v4/letter/a/e0b2c6/32.png) [@ahpl](https://discourse.joplinapp.org/u/ahpl)\
**Post date:** [29 August 2021 12:56 UTC](https://discourse.joplinapp.org/t/how-do-i-change-background-color-of-highlighted-text-in-code-editor/11620/7 "2021-08-29T12:56:34Z")

</div>

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`

---

<div class="post-metadata">

**Author:** ![CalebJohn](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/calebjohn/32/356_2.png) [@CalebJohn](https://discourse.joplinapp.org/u/CalebJohn)\
**Post date:** [29 August 2021 15:49 UTC](https://discourse.joplinapp.org/t/how-do-i-change-background-color-of-highlighted-text-in-code-editor/11620/8 "2021-08-29T15:49:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ahpl](https://avatars.discourse-cdn.com/v4/letter/a/e0b2c6/32.png) [@ahpl](https://discourse.joplinapp.org/u/ahpl)\
**Post date:** [30 August 2021 18:07 UTC](https://discourse.joplinapp.org/t/how-do-i-change-background-color-of-highlighted-text-in-code-editor/11620/9 "2021-08-30T18:07:18Z")

</div>

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