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. | |||