Highlight

Highlight one or more elements on a page


Demos & Screenshots


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.

Note

⚠ 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

Inputs

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

Outputs

Name Required Type Description
No outputs for this brick defined.

Details

ID @pixiebrix/highlight
Author @pixiebrix
Version 1.6.3
Created Aug. 17, 2021
Updated Feb. 16, 2022

Related Bricks

  • No related bricks