Highlighter Composer Button

Install this theme component

The button looks like a highlighter pen… discourse-highlighter-button It is for the very specific and limited purpose of clicking a button in the composer toolbar to insert <mark>this</mark>.

:information_source: Ctrl-H is the keyboard shortcut you can use in lieu of clicking the button.

In the settings you can override both the Highlighter (background) color an the color of the text in the highlighted portions.

Many thanks to @pfaffman and @merefield and @Lilly and @JammyDodger and @Canapin for helping out with this!


That’s amazing. Well done :clap:t2: :star_struck:


this is very nice one.

where is the .d-wrap defined ?
it shows as this color on mine with the default theme… like to have it the highlighter color as in your video, thanks


Looks like it is the --highlight-medium color variable setting in the palette you are using for that theme

Here is what one of my pallets looks like:

This component is using the medium shade of the highlight color. You can see the exact one in your style guide if you have it enabled in admin-settings-(styleguide enabled or styleguide admin only) the style guide for the theme’s colors is at /styleguide/atoms/colors

1 Like

Actually might be worth putting a PR or suggestion for a highlighter color override. :slight_smile:


yes, was thinking, better to have a setting for it


Adding a setting now… brb

1 Like

Would using mark be more expected? I think that uses the ‘highlight’ colour in the colour palette.



OK I put a setting in there to default to #ff8.

1 Like

Hah I was about to submit a pr to you :slight_smile:

Happy Super Hero Girls GIF by DC

nice, just pulled, it works great ! :grinning:


Hi @denvergeeks :slight_smile:

Here’s how your style differs (with default settings) from <mark> (which uses a Discourse’s colors variable, making it readable whatever color scheme you chose):


On a dark theme:



Perfect @Canapin, I’ll roll that in!

Or, if anyone wants to QPR that, let me know as I may not get to it today.

OK this now uses @Canapin’s suggestion to use the built-in <mark> and corresponding CSS defaults.

Also it now provides settings to override both the Highlighter (background) color and the color of the text in the highlighted portions. Thanks to @Lilly for that conditional CSS.

1 Like

I’m trying to build a json color picker but it’s not working. I just get a blank pop up with a save button. :woman_facepalming:t2:
Maybe I’ll see if a javascript one is possible somehow. The color palette and badge interface have color-picker js functions, but maybe would only work with a plugin.

1 Like

For me those settings aren’t overrides. Those must be filled, otherwise it doesn’t do anything.

And… I`m on default theme and because of lack of morning coffee I’m in slow mode — I didn’t check if that comes from theme itself.

Edit: nope, theme or color scheme doesn’t play any roll. So, will it follow color scheme and be an override, or is it a mandatory setting?

Try updating the component and refresh the page. I can’t reproduce the error.

Is it inserting the <mark></mark> tag?

I updated it first before trying. And no, it uses wrap. So I’m a bit behind?

The color picker JSON setting (in a theme/component) is not working on Discourse, indeed.
I think good practice would be to use Discourse colors variables in general instead of picking arbitrary colors in a theme or component that won’t blend nicely depending on what other themes and colors users chose.

A user made a color picker for the composer some time ago, but I’m not sure the code was released: