Highlight one or more elements on a page

by @pixiebrix

How to Use

The highlight brick can be used to change the background color of elements on a page.

After adding this brick, configure the backgroundColor input to the hex code of the color you want to use for the background.

Next set the rootSelector to an element on the page that contains all the elements you want highlighted, this can be selected with the button next to it or manually with jQuery.

Then you can similarly add one or more selectors for each element you want highlighted.

You can also use conditions to decide whether a highlight should run or not.


⚠ When using this brick, keep in mind that you cannot undo the highlight of an element once applied to the page.

If you're using this brick to create an extension, during development time you might have to refresh the page to remove the highlight.

Similarly, when using this brick in an extension actively, there's (currently) no brick that you can use to de-highlight the text you've highlighted previously.

Use Cases

  • Highlight parts of the page based on selector
  • Add multiple highlights to a page


Name Required Type Description
elements array An array of highlighting sub-rules
rootMode string Deprecated: configure root mode on common brick options instead
condition multiple Deprecated: configure condition on common brick options instead
rootSelector string Optional root selector to find the elements within
backgroundColor string Default color hex code


Name Required Type Description
No outputs for this brick defined.

Related Tags