Change inline code highlighted text #4791

New Issue

OVERLORD · 2026-02-05T09:16:00+03:00

OVERLORD commented

2026-02-05 09:16:00 +03:00

Originally created by @diasdmhub on GitHub (May 23, 2024).

Attempted Debugging

I have read the debugging page

Searched GitHub Issues

I have searched GitHub for the issue.

Describe the Scenario

Whenever I format a text to inline code and click on it, the text is highlighted and becomes very hard to read.
If I select the text, it becomes even harder to read.
It sort of takes on a high contrast color.

`Unselected` inline code text

`Clicked` inline code text

`Selected` inline code text

How can I change this highlight color to something easier to read?

Hosting Environment

Bookstack v24.02.3
Ubuntu 22.04
PHP 8.1.2
Apache/2.4.52

Originally created by @diasdmhub on GitHub (May 23, 2024). ### Attempted Debugging - [X] I have read the debugging page ### Searched GitHub Issues - [X] I have searched GitHub for the issue. <BR> ## Describe the Scenario Whenever I format a text to `inline code` and click on it, the text is highlighted and becomes very hard to read. If I select the text, it becomes even harder to read. It sort of takes on a high contrast color. #### `Unselected` inline code text ![image](https://github.com/BookStackApp/BookStack/assets/67486897/cf3e98b6-4440-43f1-a3bd-be30a6406bcc) #### `Clicked` inline code text ![image](https://github.com/BookStackApp/BookStack/assets/67486897/e2c00c65-04b7-4234-b319-481688147c5c) #### `Selected` inline code text ![image](https://github.com/BookStackApp/BookStack/assets/67486897/00fbaf51-1e0a-402e-9c88-55541de845d2) <BR> **How can I change this highlight color to something easier to read?** <BR> ### Hosting Environment - Bookstack v24.02.3 - Ubuntu 22.04 - PHP 8.1.2 - Apache/2.4.52

OVERLORD added the 🐕 Support label 2026-02-05 09:16:00 +03:00

OVERLORD closed this issue

2026-02-05 09:16:02 +03:00

OVERLORD commented

2026-02-05 09:16:03 +03:00

@ssddanbrown commented on GitHub (May 23, 2024):

Hi @diasdmhub,
If you want to override the default browser/OS text selection color, you could add the following to your "Custom HTML Head Content" customization setting in BookStack:

<style>
  /* Use a purple background and white text for just code block elements*/
  .page-content code::selection { background: #b86ad3; color: #FFF; }

  /* As above, but for all page content elements*/
  .page-content *::selection { background: #b86ad3; color: #FFF; }
</style>

There are two examples in there, you could choose the one you want and tweak the colors as desired.

@ssddanbrown commented on GitHub (May 23, 2024): Hi @diasdmhub, If you want to override the default browser/OS text selection color, you could add the following to your "Custom HTML Head Content" customization setting in BookStack: ```html <style> /* Use a purple background and white text for just code block elements*/ .page-content code::selection { background: #b86ad3; color: #FFF; } /* As above, but for all page content elements*/ .page-content *::selection { background: #b86ad3; color: #FFF; } </style> ``` There are two examples in there, you could choose the one you want and tweak the colors as desired.

OVERLORD commented

2026-02-05 09:16:04 +03:00

@diasdmhub commented on GitHub (May 23, 2024):

Thanks @ssddanbrown. The purple background is easier on my eyes.

However, as shown in my clicked example, just clicking on an inline code text will highlight it in blue.
Note that it is not a selection, it is just a click or placing the cursor on the inline code text.

My browser does not highlight any code text like this. Only Bookstack's text editor does that.
I wish it wouldn't highlight the text like that.

@diasdmhub commented on GitHub (May 23, 2024): Thanks @ssddanbrown. The purple background is easier on my eyes. However, as shown in my **`clicked`** example, just clicking on an inline code text will highlight it in blue. Note that it is not a selection, it is just a click or placing the cursor on the inline code text. ![bookstack_horrible_code_highlight](https://github.com/BookStackApp/BookStack/assets/67486897/b50876b1-4f18-4350-a2a6-c8b9b314aa19) My browser does not highlight any code text like this. Only Bookstack's text editor does that. I wish it wouldn't highlight the text like that.

OVERLORD commented

2026-02-05 09:16:05 +03:00

@FlorinBuffet commented on GitHub (Feb 25, 2025):

I can confirm in dark mode it is very hard to read. The blue selection seems to come from data-mce-selected="inline-boundary".

@FlorinBuffet commented on GitHub (Feb 25, 2025): I can confirm in dark mode it is very hard to read. The blue selection seems to come from `data-mce-selected="inline-boundary"`.

OVERLORD commented

2026-02-05 09:16:07 +03:00

@diasdmhub commented on GitHub (Mar 3, 2025):

I wonder how to edit or override it.

@diasdmhub commented on GitHub (Mar 3, 2025): I wonder how to edit or override it.

OVERLORD commented

2026-02-05 09:16:09 +03:00

@ssddanbrown commented on GitHub (Sep 3, 2025):

Since this support request is quite old, I'm going to close this off.
If support is still required, please open a new support thread.

Since this relates to the default WYSIWYG editor, you may experience more desired behavior in the new WYSIYG editor which is in beta.

@ssddanbrown commented on GitHub (Sep 3, 2025): Since this support request is quite old, I'm going to close this off. If support is still required, please open a new support thread. Since this relates to the default WYSIWYG editor, you may experience more desired behavior in the new WYSIYG editor which is in beta.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#4791

Change inline code highlighted text #4791

Attempted Debugging

Searched GitHub Issues

Describe the Scenario

Unselected inline code text

Clicked inline code text

Selected inline code text

Hosting Environment

`Unselected` inline code text

`Clicked` inline code text

`Selected` inline code text