How To Highlight Text on Webpages

Highlighting text on webpages is the core functionality and idea of Web Highlights.

It's very simple and straightforward. There are three ways to highlight text on webpages:

• Highlight text using the highlighter popup
• Highlight text by right-clicking
• Highlight text using keyboard shortcuts
• Navigate your highlights with the outline rail

💡 Did you know? When you reload the page, the highlights will be recreated. That means you can always find your highlights again when revisiting the same page.

Highlight text using the highlighter popup

💡 You can disable the popup

If you prefer not to use the popup, you can disable it in the settings and instead use the right-click highlighter or keyboard shortcuts. Learn more about how to do this here.

1. Visit any website: Navigate to any webpage you would like to highlight.

2. Select Text: Select the text you want to highlight.

3. Use Popup to highlight: Once you selected the text, a popup will appear.

   

   Now you have two options:

   • Click the marker icon: If you click the highlighter popup, the text will be highlighted with the default color.
   • Click a color: You can also click one of the pre-selected colors to highlight the text with that color. Learn how to change the default color here.

4. Edit your highlights: Once the highlight is created, you can edit it by clicking on the highlight itself. When clicking on the highlight, a toolbar will appear.

   

   Here you can:

   • Add a note: Simply type your note into the note editor that appears below the toolbar.
   • Add tags: Click the tag icon to either link to existing tags or create new tags.
   • Copy highlighted text: Click the copy icon to copy the highlighted text to your clipboard.
   • Change format: Switch between different highlight formats. These formats define how the text appears in your sidebar. You can choose between: quote, paragraph, headings, bullet list, and code. Learn more about formatted highlighting here.
   • Delete highlight: Click the delete icon to delete the highlight.
   • Change color: Click the color icon to change the highlight color.
   • Open Sidebar: Click the sidebar icon on the left to open the sidebar. (You can also use the extension icon in your browser's toolbar or use a keyboard shortcut)

Highlight text by right-clicking

Many people don't like the popup highlighter appear everytime they select text. If you are one of those people, you can disable the popup and use the right-click highlighter instead.

Extension only

Right-click highlighting is powered by the browser's context menu and is only available in the Web Highlights browser extension. It is not available in the web app reader — use the popup or keyboard shortcuts there instead.

Here is how to highlight text using the right-click highlighter:

1. Visit any website: Navigate to any webpage you would like to highlight.

2. Select Text: Select the text you want to highlight.

3. Right click: Once you selected the text, right click on it. Then choose the "Highlight selected text" option next to the Web Highlights icon.

   

4. Edit your highlights: Once the highlight is created, you can edit it by clicking on the highlight itself. When clicking on the highlight, a toolbar will appear.

   

   Here you can:

   • Add a note: Simply type your note into the note editor that appears below the toolbar.
   • Add tags: Click the tag icon to either link to existing tags or create new tags.
   • Copy highlighted text: Click the copy icon to copy the highlighted text to your clipboard.
   • Change format: Switch between different highlight formats. These formats define how the text appears in your sidebar. You can choose between: quote, paragraph, headings, bullet list, and code. Learn more about formatted highlighting here.
   • Delete highlight: Click the delete icon to delete the highlight.
   • Change color: Click the color icon to change the highlight color.
   • Open Sidebar: Click the sidebar icon on the left to open the sidebar. (You can also use the extension icon in your browser's toolbar or use a keyboard shortcut)

Highlight text using keyboard shortcuts

Many people don't like the popup highlighter appear everytime they select text. If you are one of those people, you can disable the popup and use keyboard shortcuts instead.

Configure Shortcuts 💡

You can configure your shortcuts by pasting this URL chrome://extensions/shortcuts into your browser address bar. Alternatively, you can also open the sidebar and click the shortcut icon at the bottom.

Here is how to highlight text using the keyboard shortcut:

1. Visit any website: Navigate to any webpage you would like to highlight.

2. Select Text: Select the text you want to highlight.

3. Press keyboard shortcut: Once you selected the text, press the keyboard shortcut Alt + S for Windows or Option + S for Mac to highlight the text.

   • Pro Tip: If you are using formatted highlighting, you can also press Alt + A or Option + A to highlight the text in the same format as the last selected text.

4. Edit your highlights: Once the highlight is created, you can edit it by clicking on the highlight itself. When clicking on the highlight, a toolbar will appear.

   

   Here you can:

   • Add a note: Simply type your note into the note editor that appears below the toolbar.
   • Add tags: Click the tag icon to either link to existing tags or create new tags.
   • Copy highlighted text: Click the copy icon to copy the highlighted text to your clipboard.
   • Change format: Switch between different highlight formats. These formats define how the text appears in your sidebar. You can choose between: quote, paragraph, headings, bullet list, and code. Learn more about formatted highlighting here.
   • Delete highlight: Click the delete icon to delete the highlight.
   • Change color: Click the color icon to change the highlight color.
   • Open Sidebar: Click the sidebar icon on the left to open the sidebar. (You can also use the extension icon in your browser's toolbar or use a keyboard shortcut)

Navigate your highlights with the outline rail

On any page with highlights, a thin outline rail sits on the edge of the viewport with one colored dot per highlight, placed proportionally to where each highlight is on the page. It gives you a bird's-eye view of every highlight at a glance and a way to jump straight to one.

• Hover a dot to open a preview showing the highlight's text, note, and tags — the same view the sidebar shows. Move your cursor across the small gap into the preview and it stays open, so you can edit the note, tags, or color right from the rail without opening the sidebar.

• A small icon next to a dot means that highlight has a note attached. The icon flips to the opposite side of the dot when the rail is aligned to the right.

• Click a dot to scroll the page to that highlight (and briefly flash it).

• Highlights packed close together collapse into a single cluster dot. Hovering it shows every member of the cluster as its own card so you can jump to any one of them.

• Hide it temporarily with the × button on the rail itself. A small toast confirms and offers a shortcut back to Settings. The choice persists across reloads until you flip Show highlights outline back on in Settings → Customize.

Extension only

The outline rail runs alongside the extension's content scripts. It's available on any page where you've created at least one highlight — including PDFs — and disappears automatically when the sidebar is open or the page has no highlights yet.