# Highlight text Theme Component

**URL:** https://meta.discourse.org/t/highlight-text-theme-component/152733
**Category:** Theme component
**Created:** [May 26, 2020, 6:31am UTC](https://meta.discourse.org/t/highlight-text-theme-component/152733 "2020-05-26T06:31:14Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![sbernhard](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sbernhard/32/208186_2.png) [@sbernhard](https://meta.discourse.org/u/sbernhard)
#### Post date: [May 26, 2020, 6:31am UTC](https://meta.discourse.org/t/highlight-text-theme-component/152733/1 "2020-05-26T06:31:14Z")

</div>

### Screenshot

 ![image](https://global.discourse-cdn.com/meta/original/3X/3/6/36f46091d88926f7358d9aa16f80de230138c858.png)

### Repo

[discourse-highlight-text](https://github.com/sbernhard/discourse-highlight-text)

### About

Add some common brand terms on your forum to the theme settings, and they will get highlighted in every post.  
Uses [https://markjs.io/](https://markjs.io/) to highlight text in discourse. Supports mark() and markRegExp() methods. The ‘quaternary’ theme color (discourse → customize → colors) is used to highlight the text.

### Installation

[How do I install a Theme or Theme Component?](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)

### Preview

> **[What is a onebox?](https://discourse.theme-creator.io/t/what-is-a-onebox/276/11?preview_theme_id=3570)**
>
> Copy and Pasting of images 😄 I know, it is the little things that excite me about Discourse. Stuff many people likely wouldn’t pay attention to, but it was those little details that makes me enjoy using it.

### Configuration

Configure the theme component in its settings. Set if you want to mark a single word or if you prefer to set a regular expression for selecting the text. It’s also possible to specify if case (in)-sensitive.

Example regular expression: [\s]discourse[\s] (See above screenshot and the highlighted word “discourse”).

### Thanks

Thank you, [https://markjs.io/](https://markjs.io/)

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [May 26, 2020, 6:55am UTC](https://meta.discourse.org/t/highlight-text-theme-component/152733/2 "2020-05-26T06:55:44Z")

</div>

Might be a good idea if you could add some simple instructions & example on how to use to the OP?

---

<div class="post-metadata">

### Author: ![sbernhard](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sbernhard/32/208186_2.png) [@sbernhard](https://meta.discourse.org/u/sbernhard)
#### Post date: [May 26, 2020, 7:01am UTC](https://meta.discourse.org/t/highlight-text-theme-component/152733/3 "2020-05-26T07:01:15Z")

</div>

The example is in the settings. I can add a example if you insist.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [May 26, 2020, 7:01am UTC](https://meta.discourse.org/t/highlight-text-theme-component/152733/4 "2020-05-26T07:01:52Z")

</div>

Don’t insist, but maybe I’m being slow this morning but wasn’t clear to me how to exploit. 🤔

An example would really help I think. What does the post look like to generate this screenshot?

---

<div class="post-metadata">

### Author: ![sbernhard](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sbernhard/32/208186_2.png) [@sbernhard](https://meta.discourse.org/u/sbernhard)
#### Post date: [May 26, 2020, 7:11am UTC](https://meta.discourse.org/t/highlight-text-theme-component/152733/5 "2020-05-26T07:11:10Z")

</div>

Thanks for the feedback. See changed first post.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [May 26, 2020, 7:11am UTC](https://meta.discourse.org/t/highlight-text-theme-component/152733/6 "2020-05-26T07:11:54Z")

</div>

Great! What an interesting option. Thanks for making!

---

<div class="post-metadata">

### Author: ![neounix](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/neounix/32/215617_2.png) [@neounix](https://meta.discourse.org/u/neounix)
#### Post date: [May 26, 2020, 7:18am UTC](https://meta.discourse.org/t/highlight-text-theme-component/152733/7 "2020-05-26T07:18:19Z")

</div>

@sbernhard

This kind of “utility” theme components are really useful.

Thanks for making and sharing.

---

<div class="post-metadata">

### Author: ![sbernhard](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sbernhard/32/208186_2.png) [@sbernhard](https://meta.discourse.org/u/sbernhard)
#### Post date: [May 26, 2020, 7:20am UTC](https://meta.discourse.org/t/highlight-text-theme-component/152733/8 "2020-05-26T07:20:29Z")

</div>

Its just a small thing but to highlight the brand name e.g. can be useful. Thanks for the feedback.

---

<div class="post-metadata">

### Author: ![neounix](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/neounix/32/215617_2.png) [@neounix](https://meta.discourse.org/u/neounix)
#### Post date: [May 26, 2020, 7:22am UTC](https://meta.discourse.org/t/highlight-text-theme-component/152733/9 "2020-05-26T07:22:34Z")

</div>

> [@sbernhard](#):
>
> Its just a small thing but to highlight the brand name e.g. can be useful

“Small things” are sometimes the best things.

Plus, some of us can learn from your theme components easily, since they are “simple” :). “Simplicity” is. a kind of zen… good job!

Looking forward to your next one!
