# Fast Highlight

**URL:** https://meta.discourse.org/t/fast-highlight/277528
**Category:** Development
**Created:** [September 1, 2023, 7:30am UTC](https://meta.discourse.org/t/fast-highlight/277528 "2023-09-01T07:30:30Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![denvergeeks](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denvergeeks/32/327671_2.png) [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [September 1, 2023, 7:30am UTC](https://meta.discourse.org/t/fast-highlight/277528/1 "2023-09-01T07:30:30Z")

</div>

> [@Introducing fast edit](https://meta.discourse.org/t/introducing-fast-edit/204182):
>
> As of today it’s now possible to edit a small selection of a post in few clicks. [fast-edit] Can be disabled with the site setting: enable\_fast\_edit Important: If the code is not able to define with certainty which part of the post should be edited, it will fallback to open the composer. It doesn’t work with discourse-encrypt ATM Future improvement: a keyboard shortcut [Add keyboard shortcuts to Fast Edit](https://meta.discourse.org/t/add-keyboard-shortcuts-to-fast-edit/277633) Built with @Falco @sam @dan @tgxworld and @pmusaraj

All this needs now is a “Highlight” button!

Could a Theme Component work for this, or would it need to be a Plugin? Any existing starting points would be stellar for me to get started looking into it!

Maybe duplicate the “Quote” button functions and re-style the result… hmm…

![sharpie markers lol GIF by Sharpie](https://global.discourse-cdn.com/meta/original/4X/4/b/8/4b8c81926bac03a853e60208ea1eb122471dbfa1.webp)

---

<div class="post-metadata">

### Author: ![Jordanstarck](https://avatars.discourse-cdn.com/v4/letter/j/a9adbd/32.png) [@Jordanstarck](https://meta.discourse.org/u/Jordanstarck)
#### Post date: [September 1, 2023, 11:19am UTC](https://meta.discourse.org/t/fast-highlight/277528/2 "2023-09-01T11:19:46Z")

</div>

this feature is clearly a good idea

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [September 1, 2023, 11:41am UTC](https://meta.discourse.org/t/fast-highlight/277528/3 "2023-09-01T11:41:55Z")

</div>

> [@denvergeeks](#):
>
> All this needs now is a “Highlight” button

Why? (+ few characters more…\[1\])

* * *

1. that limit actually quite often increases noise that decreases

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [September 1, 2023, 12:50pm UTC](https://meta.discourse.org/t/fast-highlight/277528/4 "2023-09-01T12:50:34Z")

</div>

What would the highlight button do @denvergeeks? Can you give me an example of when you’d use it?

---

<div class="post-metadata">

### Author: ![denvergeeks](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denvergeeks/32/327671_2.png) [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [September 1, 2023, 3:18pm UTC](https://meta.discourse.org/t/fast-highlight/277528/5 "2023-09-01T15:18:12Z")

</div>

@JammyDodger - I use Discourse for a variety of different use-cases.

For me Discourse is a toolset for building information “containers”.

I host my own 10 private (for now, and growing) instances for my various creative projects and collaborations. Each one is a unique workspace for something I’m passionate about, and customizing each workspace is half (or more) of the fun as I build my creative empire!

Highlighting is just one more awesome way I can call out and mark up certain information that I want the eye to be drawn to, in order to simplify (and make more fun and interesting and compelling) my own (re)reading and comprehension and editing for both myself and my collaborators.

Wow. To be able to swipe a block of text and pop a background color on it, right on the face of the page; or instantly add a footnote/annotation/tooltip (next on my list if I can figure out how to add more buttons to the fast edit - !!!)

I think I would never get any sleep at all anymore I would be so productive!

> **[Google Search](https://www.google.com/search?q=highlighting+text)**

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [September 1, 2023, 9:03pm UTC](https://meta.discourse.org/t/fast-highlight/277528/6 "2023-09-01T21:03:40Z")

</div>

Ah, so you’re looking to highlight the selected text within the posts (rather than quote it with highlight prefilled in the composer). Sort of like a targeted staff-colour style concept?

---

<div class="post-metadata">

### Author: ![denvergeeks](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denvergeeks/32/327671_2.png) [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [September 1, 2023, 9:13pm UTC](https://meta.discourse.org/t/fast-highlight/277528/7 "2023-09-01T21:13:09Z")

</div>

Yes. The Mini Editor box that pops up does accept BBCODE so I’m thinking that the Highlight button could, right inside the mini-box, just wrap the selected text inside a bbcode like this

`[bgcolor=#ff8]this text would then have a yellow background[/bgcolor]`

@merefield’s tidy little TC might be able to be used – I’m looking at it…

[https://github.com/merefield/discourse-tc-coloured-text](https://github.com/merefield/discourse-tc-coloured-text)

If we wanted to go fancy, the button could pop up a tiny bbcode toolbar like this…

[https://www.phpbb.com/customise/db/extension/advanced\_bbcode\_box/](https://www.phpbb.com/customise/db/extension/advanced_bbcode_box/)

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [September 1, 2023, 9:54pm UTC](https://meta.discourse.org/t/fast-highlight/277528/8 "2023-09-01T21:54:39Z")

</div>

I think this would be an awesome feature and I also think it would be difficult to develop.

It makes me think of this project that was never released:

> [@Feature: "Like" specific text inside a post, not just the post itself (Video)](https://meta.discourse.org/t/feature-like-specific-text-inside-a-post-not-just-the-post-itself-video/248386):
>
> Hi Community, I have a programming question related to a new feature that I am building on a theme component. I prepared a short video to demonstrate what I already have and where I am blocked. Here is a short description though: I want people to be able to “like” specific text inside posts (also other peoples’ posts) - not just the entire post. Once a user selects a text, he clicks a new icon which in turn wraps the selected text with the [warp] block, which I then use to style. The …

---

<div class="post-metadata">

### Author: ![denvergeeks](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denvergeeks/32/327671_2.png) [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [September 1, 2023, 10:09pm UTC](https://meta.discourse.org/t/fast-highlight/277528/9 "2023-09-01T22:09:33Z")

</div>

So here’s my tiny hack of @merefield’s bitty colouring TC…

[https://github.com/denvergeeks/discourse-highlight-bbcode-tc](https://github.com/denvergeeks/discourse-highlight-bbcode-tc)

It works in the composer, so a start!

 ![Screenshot 2023-09-01 161154](https://global.discourse-cdn.com/meta/original/4X/5/c/3/5c3f3028411e028cbd92f04985c3a66bee55d07b.png)

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [September 2, 2023, 4:20pm UTC](https://meta.discourse.org/t/fast-highlight/277528/10 "2023-09-02T16:20:35Z")

</div>

My idea for the coloring would be to use `[wrap=highlight]` around the stuff you want highlighted and then apply the style to `<div class="d-wrap" data-wrap="highlight">`

The next step would be to add a composer button to apply the highlight to selected text in the composer, and then you could go about doing it without opening the composer.

[Discourse Mermaid](https://meta.discourse.org/t/discourse-mermaid/218242) is a good theme component to use to see how to add a composer button. That targets code-blocks, though. [GitHub - literatecomputing/discourse-qrcode-wrap-theme-component: Insert QR Code in a [wrap] · GitHub](https://github.com/literatecomputing/discourse-qrcode-wrap-theme-component) is a theme component that I wrote that generates a qrcode using a `wrap`.

---

<div class="post-metadata">

### Author: ![darkpixlz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkpixlz/32/549896_2.png) [@darkpixlz](https://meta.discourse.org/u/darkpixlz)
#### Post date: [September 2, 2023, 4:48pm UTC](https://meta.discourse.org/t/fast-highlight/277528/11 "2023-09-02T16:48:05Z")

</div>

I think that `<ins>` could also do the job

---

<div class="post-metadata">

### Author: ![denvergeeks](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denvergeeks/32/327671_2.png) [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [September 2, 2023, 4:59pm UTC](https://meta.discourse.org/t/fast-highlight/277528/12 "2023-09-02T16:59:09Z")

</div>

Thank you!!! Studying those now…

> [@pfaffman](#):
>
> [GitHub - literatecomputing/discourse-qrcode-wrap-theme-component: Insert QR Code in a [wrap] · GitHub](https://github.com/literatecomputing/discourse-qrcode-wrap-theme-component)

[https://github.com/literatecomputing/discourse-qrcode-theme-component](https://github.com/literatecomputing/discourse-qrcode-theme-component) is the correct URL (or.. er… anyway the other is 404)

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [September 2, 2023, 5:01pm UTC](https://meta.discourse.org/t/fast-highlight/277528/13 "2023-09-02T17:01:24Z")

</div>

> [@denvergeeks](#):
>
> [GitHub - literatecomputing/discourse-qrcode-theme-component: Add QRcode to composer · GitHub](https://github.com/literatecomputing/discourse-qrcode-theme-component) is the correct URL

If you want to have an example that uses code-blocks rather than using `[wrap]`. I don’t think you want code blocks.

---

<div class="post-metadata">

### Author: ![denvergeeks](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denvergeeks/32/327671_2.png) [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [September 2, 2023, 5:03pm UTC](https://meta.discourse.org/t/fast-highlight/277528/14 "2023-09-02T17:03:34Z")

</div>

> [@pfaffman](#):
>
> [GitHub - literatecomputing/discourse-qrcode-wrap-theme-component: Insert QR Code in a [wrap] · GitHub](https://github.com/literatecomputing/discourse-qrcode-wrap-theme-component)

That one is 404 - got a working link?

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [September 2, 2023, 5:04pm UTC](https://meta.discourse.org/t/fast-highlight/277528/15 "2023-09-02T17:04:32Z")

</div>

I think [MD Composer extras](https://meta.discourse.org/t/md-composer-extras/118912) has one in, though I’m unsure how to make this the same as the floating fast edit one?

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [September 2, 2023, 5:05pm UTC](https://meta.discourse.org/t/fast-highlight/277528/16 "2023-09-02T17:05:07Z")

</div>

> [@denvergeeks](#):
>
> That one is 404 - got a working link?

Sorry. It was private. Fixed now.

> [@JammyDodger](#):
>
> I’m unsure how to make this the same as the floating fast edit one?

You and me both, brother!

I think you’d need to wade into the discourse source.

---

<div class="post-metadata">

### Author: ![denvergeeks](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denvergeeks/32/327671_2.png) [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [September 2, 2023, 5:15pm UTC](https://meta.discourse.org/t/fast-highlight/277528/17 "2023-09-02T17:15:10Z")

</div>

> [@pfaffman](#):
>
> The next step would be to add a composer button to apply the highlight to selected text in the composer, _ **and then you could go about doing it without opening the composer** _.

@pfaffman could you please clarify “without opening the composer”?

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [September 2, 2023, 5:39pm UTC](https://meta.discourse.org/t/fast-highlight/277528/18 "2023-09-02T17:39:36Z")

</div>

> [@denvergeeks](#):
>
> could you please clarify “without opening the composer”?

I thought what you wanted was to be able to do a “fast edit” so that you could add the highlighting without opening the full composer.

Like this:

 ![image](https://global.discourse-cdn.com/meta/original/4X/e/f/7/ef725c5ba94e25889a22227b452f24c889a6ae42.png)

But maybe with a “highlight” button there (which might not be so hard). And what it sounded like you really wanted was a single click that would edit, apply the highlight, and save.

---

<div class="post-metadata">

### Author: ![denvergeeks](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denvergeeks/32/327671_2.png) [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [September 2, 2023, 5:55pm UTC](https://meta.discourse.org/t/fast-highlight/277528/19 "2023-09-02T17:55:16Z")

</div>

Yes indeed, that is exactly what I’m seeking.

---

<div class="post-metadata">

### Author: ![denvergeeks](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denvergeeks/32/327671_2.png) [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [September 2, 2023, 6:57pm UTC](https://meta.discourse.org/t/fast-highlight/277528/20 "2023-09-02T18:57:06Z")

</div>

Alright well now I’ve got 2 working theme components rolled for this…

[https://github.com/denvergeeks/discourse-highlight-wrap-theme-component](https://github.com/denvergeeks/discourse-highlight-wrap-theme-component)

and

[The one above I modified](https://meta.discourse.org/t/fast-highlight/277528/9) from @merefield’s Coloured Text TC.

Now want to make it a quick edit tool.

[Next page](https://meta.discourse.org/t/fast-highlight/277528.md?page=2)
