### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [September 3, 2023, 1:56am UTC](https://meta.discourse.org/t/highlighter-composer-button/277597/1 "2023-09-03T01:56:39Z")
| | | |
| --- | --- | --- |
| ℹ | **Summary** | A Text Highlighter Button for the Discourse Composer Toolbar |
| 👓 | **Preview** | [Video Demo](https://vimeo.com/860540857) |
| 🛠 | **Repository** | [GitHub - denvergeeks/discourse-highlight-wrap-theme-component: A Text Highlighter Button for the Discourse Composer Toolbar · GitHub](https://github.com/denvergeeks/discourse-highlight-wrap-theme-component) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme component
The button looks like a highlighter pen…  It is for the very specific and limited purpose of clicking a button in the composer toolbar to insert `
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [September 3, 2023, 2:02am UTC](https://meta.discourse.org/t/highlighter-composer-button/277597/2 "2023-09-03T02:02:33Z")
That’s amazing. Well done 👏🏻 🤩
---
### Author:  [@fbpbdmin](https://meta.discourse.org/u/fbpbdmin)
#### Post date: [September 3, 2023, 6:56pm UTC](https://meta.discourse.org/t/highlighter-composer-button/277597/3 "2023-09-03T18:56:45Z")
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
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [September 3, 2023, 7:14pm UTC](https://meta.discourse.org/t/highlighter-composer-button/277597/4 "2023-09-03T19:14:06Z")
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`
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [September 3, 2023, 7:22pm UTC](https://meta.discourse.org/t/highlighter-composer-button/277597/5 "2023-09-03T19:22:44Z")
Actually might be worth putting a PR or suggestion for a highlighter color override. 🙂
---
### Author:  [@fbpbdmin](https://meta.discourse.org/u/fbpbdmin)
#### Post date: [September 3, 2023, 7:23pm UTC](https://meta.discourse.org/t/highlighter-composer-button/277597/6 "2023-09-03T19:23:18Z")
yes, was thinking, better to have a setting for it
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [September 3, 2023, 7:24pm UTC](https://meta.discourse.org/t/highlighter-composer-button/277597/7 "2023-09-03T19:24:14Z")
Adding a setting now… brb
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [September 3, 2023, 7:31pm UTC](https://meta.discourse.org/t/highlighter-composer-button/277597/8 "2023-09-03T19:31:37Z")
Would using mark be more expected? I think that uses the ‘highlight’ colour in the colour palette.
`mark`
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [September 3, 2023, 7:40pm UTC](https://meta.discourse.org/t/highlighter-composer-button/277597/9 "2023-09-03T19:40:21Z")
OK I put a setting in there to default to #ff8.
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [September 3, 2023, 7:42pm UTC](https://meta.discourse.org/t/highlighter-composer-button/277597/10 "2023-09-03T19:42:29Z")
Hah I was about to submit a pr to you 🙂
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [September 3, 2023, 7:44pm UTC](https://meta.discourse.org/t/highlighter-composer-button/277597/11 "2023-09-03T19:44:43Z")
---
### Author:  [@fbpbdmin](https://meta.discourse.org/u/fbpbdmin)
#### Post date: [September 3, 2023, 7:58pm UTC](https://meta.discourse.org/t/highlighter-composer-button/277597/12 "2023-09-03T19:58:19Z")
nice, just pulled, it works great ! 😀
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [September 4, 2023, 9:34am UTC](https://meta.discourse.org/t/highlighter-composer-button/277597/13 "2023-09-04T09:34:05Z")
Hi @denvergeeks 🙂
Here’s how your style differs (with default settings) from `` (which uses a Discourse’s colors variable, making it readable whatever color scheme you chose):
On a dark theme:
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [September 4, 2023, 6:53pm UTC](https://meta.discourse.org/t/highlighter-composer-button/277597/14 "2023-09-04T18:53:27Z")
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.
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [September 5, 2023, 4:41am UTC](https://meta.discourse.org/t/highlighter-composer-button/277597/15 "2023-09-05T04:41:21Z")
OK this now uses @Canapin’s suggestion to use the built-in `` 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.
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [September 5, 2023, 4:58am UTC](https://meta.discourse.org/t/highlighter-composer-button/277597/16 "2023-09-05T04:58:36Z")
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. 🤦🏻♀️
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.
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [September 5, 2023, 6:15am UTC](https://meta.discourse.org/t/highlighter-composer-button/277597/17 "2023-09-05T06:15:33Z")
> [@denvergeeks](#):
>
> override both
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?
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [September 5, 2023, 6:24am UTC](https://meta.discourse.org/t/highlighter-composer-button/277597/18 "2023-09-05T06:24:00Z")
Try updating the component and refresh the page. I can’t reproduce the error.
Is it inserting the `` tag?
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [September 5, 2023, 6:25am UTC](https://meta.discourse.org/t/highlighter-composer-button/277597/19 "2023-09-05T06:25:32Z")
I updated it first before trying. And no, it uses wrap. So I’m a bit behind?
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [September 5, 2023, 6:26am UTC](https://meta.discourse.org/t/highlighter-composer-button/277597/20 "2023-09-05T06:26:08Z")
> [@Lilly](#):
>
> Maybe I’ll see if a javascript one is possible somehow.
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:
> [@BBcode color tags in a theme](https://meta.discourse.org/t/bbcode-color-tags-in-a-theme/211902/8):
>
> I think I have something cooked up based on the previous work of you guys. Will post a PR this weekend. Still bugs and things to iron out. [qKJ3Qt2RpY]
[Next page](https://meta.discourse.org/t/highlighter-composer-button/277597.md?page=2)