Default highlight.css marker background color definitions are not loaded

Hi kopeboy!

Thanks for reaching out.
We consider current behaviour the expected one and we haven't had plans to change it so far, as giving flexibility to our users was our main motivator here. We appreciate the fact that adding custom CSS might be non-trivial for some users, but at the same time it's not something too complex for most Drupal admins in our opinion.

However, we are open to feedback and we'll keep the issue active for some time to see if there will be more demand for such change and we'll consider it based on that.

I have encountered the same problem. The above issue has been marked as "postponed".

It seems that the Proposed Resolution posted above was after some prior discussions not shown above. I cannot comprehend the full story, May I have more explanation of how to resolve the problem, i.e. how to configure it.

Hi @kc-tang

Thank you for your feedback, having more requests here will encourage us to reconsider possibility of adding highlight styles automatically.
In the meantime you can display various marker colors in the frontend theme by adding css rules to your theme's styles:

If you would like to use only default CKEditor 5 markers then simply add:

.marker-yellow { background-color: #fdfd77; }
.marker-green { background-color: #62f962; }
.marker-pink { background-color: #fc7899; }
.marker-blue { background-color: #72ccfd; }
.pen-red { background-color: transparent; color: #e71313; }
.pen-green { background-color: transparent; color: #128a00; }

Or since the CKEditor variables are added to frontend themes globally then you can use css rules which @kopeboy posted in the issue's description.

In case you would like to use custom colors please check our guide at https://www.drupal.org/docs/extending-drupal/contributed-modules/contrib...

Thank you for the direction!

I use the Bartik theme. I have similar codes in my print.css borrowed from the previous "ckeditor5 highlight" module, and have added them to .../web/themes/contrib/bartik/css/layout.css:

mark.marker-blue {
background-color: hsl(201, 97%, 72%);
}
mark.marker-green {
background-color: hsl(120, 93%, 68%);
}
mark.marker-pink {
background-color: hsl(345, 96%, 73%);
}
mark.marker-yellow {
background-color: hsl(60, 97%, 73%);
}
mark.pen-blue {
background-color: inherit;
color: hsl(201, 97%, 72%);
}
mark.pen-green {
background-color: inherit;
color: hsl(112, 100%, 27%);
}
mark.pen-red {
background-color: inherit;
color: hsl(0, 85%, 49%);
}

The highlighting is now working. Previously, the highlighting was working when in the edit mode or in the printer-friendly mode, but not working in the view mode.

For the resolution suggested by @kopeboy, may I know which file to edit to add the settings?

By the way, I would like to report that the same problem and phenomenon happen with the Font Colour icon.

The following codes cannot work out:

<span style="background-color:hsl(30,75%,60%);">mark</span> 
<span style="color:hsl(270,75%,60%);">added</span>

How should I configure to enable them?

Hi @kc-tang

Sorry for long response, I was on vacation last week.
The kopeboy's rules should work also when placed in layout.css file

Font colour uses "style" property which is filtered out by "Limit allowed HTML tags and correct faulty HTML" filter in the text format settings. It will work only without that one.

I confirm that I had that unchecked before and now. The highlighted font cannot display when in view mode. Which configuration files might have been disturbed?

@kc_tang
Sorry for long response. It's not a matter of configuration, but attaching a styles to theme. If you use bartik then indeed it is not as easy as adding styles in custom theme. It would require to add a custom css library in custom module and attach it in a preprocess function.
I'll push a MR soon which will add such option in the text format configuration.

MR added. Patch adds an option to attach styles to all pages. It is located in text format settings in same place where custom colors are defined. On form submit if checkbox is checked there will be created a file in public:/ckeditor5/ directory.
Then when libraries are assembled for each text format having attach styling selected there will be created a dynamic css library which will be attached to every page.
A cache rebuild will be required after saving a text format, however I suppose I could add a css librsries flush in code.

Tested by our QA team, merged and will be added to the next release.

Feature has been released in 1.3.1

I believe the solution implemented doesn't work in a normal drupal development cycle. The solution is creating a piece of content (the .css file) when the form is saved. But the form (text formats) is saved as part of configuration so on a development machine, the first time the form is saved the new css file is created - but when pushing configuration to production the css content file won't be created.

I would also suggest that having per-text-format highlighting color/class and style configuration doesn't make much sense and complicats all this considerably - the viewer of the content has no idea how it was created. It would seem a really simple answer is to always include the highlight.css library when Highlight plug-in is enabled.

Yes the way this is implemented does not work for our Drupal deployments.

Locally I enabled the "Add styles for rendered content automatically" setting, this creates the public://ckeditor5 folder with the following files:

ckeditor5_plugin_pack_highlight-basic_html.css
ckeditor5_plugin_pack_highlight-full_html.css

Then I do a drush config:export and try to deploy my changes to our production environment. Unfortunately, I get an error.

Mon Mar 23 11:57:27.630989 2026] proxy_fcgi:error] pid 84:tid 138212424054528] client 127.0.0.1:55590] AH01071: Got error 'PHP message: Uncaught PHP Exception TypeError: "file_exists(): Argument #1 ($filename) must be of type string, bool given" at /var/www/html/web/modules/contrib/ckeditor5_plugin_pack/modules/ckeditor5_plugin_pack_highlight/ckeditor5_plugin_pack_highlight.module line 49'

On line 47: \Drupal::service('file_system')->realpath() returns false when the path doesn't exist - specifically when the public://ckeditor5/ directory hasn't been created yet on the production server.

realpath() only returns a string path if the file/directory actually exists on disk. Since the deployment is a fresh environment (or the ckeditor5/ subdirectory hasn't been created), realpath() returns false, which then gets passed to file_exists() on line 49 - triggering the TypeError.

Should ckeditor5_plugin_pack be checking for/creating the directory before calling realpath()?

Should ckeditor5_plugin_pack be checking for/creating the directory before calling realpath()?

Yup, this sounds definetely like a thing we need to add. Thank you for detailed info.

Ah, re-closing. I didn't notice new issue at first. Wanted to re-open, then noticed the new ticket and forgot to change back the option here :(