Default highlight.css marker background color definitions are not loaded

Ooops! I just noticed the provided highlight.css already includes exactly that CSS 😅

So, the problem is that both in Olivero and Claro, they don't work somehow 🤔

Tested on Chrome desktop and vanilla Drupal 10.3.2

It would still be possible to include the CSS on all pages by adding the library I guess, so changing this back to Feature request 😇

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:
mark
added

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?