# Web Highlighter Tutorial
{% hint style="info" %}
đ Before you begin this tutorial, make sure you've completed the [Developer Quick Start Guide](https://docs.pixiebrix.com/quick-start/mod-developer).
{% endhint %}
Have you ever wanted to **highlight** a word or phrase on a page so you can find it? Probably, and maybe you even wanted to find multiple keywords instead of just using the âfindâ search in your browser multiple times.
This tutorial will show you how to do that. We're going to use the tech news forum site [Hacker News](https://news.ycombinator.com/) as an example.
Let's assume we want to highlight every time someone mentions the word â**disclosureâ** in a comment thread on Hacker News. *(Commenters often include the word âdisclosureâ when they work for the company that is the subject of a discussion. These commenters can have an insider perspective, or a unique bias.)*
For example:
### 1. Add a Trigger
#### Navigate to a Hacker News discussion
Start by navigating your browser to this HN discussion page:
#### Open the Page Editor
Next, open the PixieBrix Page Editor.
{% hint style="info" %}
đNeed help opening the Page Editor? Follow the steps here: [open-the-page-editor](https://docs.pixiebrix.com/platform-overview/page-editor/open-the-page-editor "mention")
{% endhint %}
#### Enable PixieBrix on the Page
The first time you open the Page Editor on a new webpage, you need to grant PixieBrix access to the page.
Grant access to PixieBrix by clicking the Enable PixieBrix on [ycombinator.com](http://ycombinator.com/) button. Chrome will prompt you to accept access.
#### Add a Page Load Trigger
Use the **New Mod** button on the top left of the Page Editor to add a Trigger.
The Trigger defaults to the Page Load trigger, which runs when the page first loads or whenever you navigate
* In the Brick Configuration Panel, set the field **Name** field to **`HN highlighter trigger`** or whatever youâd prefer to call it.
* Set the field **Sites** to **`https://news.ycombinator.com/item*`** By specifying a site, you ensure that the trigger only runs on the comment pages on the Hacker News website
* The `*` in the Site match pattern accepts any text. You can use the `*` in the URL scheme, domains, and at the end of the path
When youâve done the above steps, your Brick Configuration Panel should look like this:
## 2. Add and configure the Highlight brick
Click the **+** button below the trigger brick in the Mod Overview Panel to add a new brick.
In the Add Brick Modal, search for âhighlightâ, hover your mouse over the Highlight search result, and click **+ Add**
In the Brick Configuration Panel, weâll now tell the Highlight brick which elements to highlight
Click on the entry mode toggle on the **elements field,** and select Array Items
Next, click the blue **Add Item** button to add an array of item
Click the comment to select it and exit out of selection mode.
When you select an element, PixieBrix determines a unique selector for that element. However, for our use case, we want to highlight *all elements on the page* that contain the word disclosure
Therefore, weâll enter our own selector that matches the text using a `contains` selector in the same elements field that was just populated. Provide the following value to the field.
Copy the following:
```
span:contains('Disclosure'), span:contains('DISCLOSURE'), span:contains('disclosure')
```
The `contains` selector is case-sensitive. Therefore, the above selector uses the multiple selector indicated by a comma `,` to match any of the typical spellings of the word âdisclosureâ
{% hint style="info" %}
*đ Want to see a full list of selectors supported by PixieBrix? PixieBrix uses the popular jQuery library;* [*you can find the full list of supported selectors here*](https://api.jquery.com/category/selectors/)
{% endhint %}
The elements field should look like this.
Next, weâll scroll through the page to determine if Hacker News uses any other elements tags to show comments.
To add another element to the elements list to highlight, click the blue **Add Item** button again
Click the arrow button to enter selection mode in the new element row. If you mouse over comments on the page, youâll see that some comments use the `div` tag.
Click anywhere on the page to exit selection mode. As before, weâll instead enter our own selector to match the keyword weâre highlighting:
Copy the following:
```
div:contains('Disclosure'), div:contains('DISCLOSURE'), div:contains('disclosure')
```
One final setting to update! In the condition field, select the ABC option at the end of the row, and select the âXâ to exclude the conditional criteria.
The Brick Configuration Panel should now look like this:
## 3. Run the Trigger
Itâs time to try your trigger! To run the trigger from the Page Editor, click the Run Trigger button above the Data Panel.
If you search for the word `disclosure` on the page, youâll see that the comment is now highlighted in yellow!
Remember to save your trigger by clicking the save icon in the Mod Panel:
Clicking the Save icon will bring up a modal for [saving-a-mod](https://docs.pixiebrix.com/developing-mods/sharing-mods/saving-a-mod "mention"). Set an alias if you haven't already and give the mod a unique ID and description, then click **Create**.
We can now highlight important keywords on the page load. You can use this method to highlight any keywords with multiple colors â you just need to copy the highlight brick and change the `backgroundColor` field and keywords in the selectors.
đNeed some help with building? [Head over to the Slack Community](https://slack.pixiebrix.com/), and weâll gladly help you!
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.pixiebrix.com/tutorials/developer-tutorials/beginner/web-highlighter-tutorial.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
