Formatted Highlighting

Watch on YouTube

Video transcript

• 0:02 Formatted highlighting. Here is how you highlight headings, lists and code in their original format with Web Highlights.
• 0:07 Turn on Advanced mode. First, open the sidebar and click the settings icon at the bottom. Under Highlighter Mode, simply switch to Advanced, which is part of the Ultimate plan.
• 0:15 Heading 1 for the title. Now select the title of the page, hover over the highlighter, and pick Heading 1 from the small toolbar next to it.
• 0:21 Quote is the default. For a sentence you want to keep as a quote, just click the highlighter as usual, because Quote is the default.
• 0:26 Heading 2 and bullet lists. The section title becomes Heading 2, and for a step from a numbered list I simply choose the bullet list icon, so it stays a proper list point.
• 0:33 Heading 3 and code. Further down, the smaller headline is saved as Heading 3. The search example is code, so I pick the code icon, and it keeps its monospace look.
• 0:40 Plain paragraphs. And normal body text below it can of course also be saved as a plain paragraph instead of a quote.
• 0:46 Like the article in miniature. As you can see, the sidebar now looks like a small version of the article, with all its headings, lists and code.
• 0:51 Change the format later. Picked the wrong format? Click the format icon on a highlight in the sidebar and choose another one, for example Paragraph instead of Quote.

You're reading a long technical article. You highlight the title, a few key paragraphs, a code snippet, and some bullet points. Later, when you open your sidebar, everything looks the same — plain quoted text. You can't tell which highlight was the heading and which was the code block.

Formatted highlighting fixes this. It preserves headings, paragraphs, bullet points, code blocks, and more — so your highlights look exactly like the content you marked.

🚀 Ultimate Feature

This feature is available in our Ultimate plan. You can try it free for 7 days. Upgrade to Ultimate anytime from the pricing page within the app.

• What It Looks Like
• How to Enable It
• The Formatting Toolbar
• Creating a Formatted Highlight
• Supported Formats
• Changing the Format Later
• Formatted Exports
• Further reading

What It Looks Like

With formatted highlighting enabled, your sidebar preserves the original structure of everything you highlight. Headings stay as headings, code stays as code, and list items stay as bullets.

Your highlights keep their original structure — headings, code, lists, and paragraphs are all distinguishable at a glance

Compare this to the standard mode where every highlight is a plain quote. With formatted highlighting, scanning your notes feels like reading the original article in miniature.

How to Enable It

1. Open the sidebar (click the extension icon or press Alt + W / Option + W).
2. Go to Settings.
3. Under Highlighter Mode, select Advanced.

Switch to Advanced mode in Settings → Highlighter Mode

Once enabled, every new highlight will preserve its original structure.

First-time setup

The first time you create a few highlights, Web Highlights shows an overlay on the formatting toolbar with an Enable button. Click it to open the Highlighter Mode settings. This only appears once.

The Formatting Toolbar

When you select text with Advanced mode enabled and hover over the highlighter, a formatting toolbar appears next to it. The highlighter button itself creates a quote, and each icon next to it applies a different format.

Select text and pick a format — the toolbar appears alongside the color picker

Creating a Formatted Highlight

After selecting text, hover over the highlighter and click a format icon in the toolbar to create a highlight with that format. For example, highlighting a title as Heading 1 preserves it as a proper heading in the sidebar:

The article title is preserved as Heading 1 in the sidebar

Supported Formats

Format	Icon	What it preserves
Quote	Default highlight icon	Standard colored quote — the default for every highlighter
Paragraph	T	Regular body text with proper spacing
Heading 1	H1	Article titles and main headings
Heading 2	H2	Section headings
Heading 3	H3	Sub-section headings
Bullet list	Bullet	Bullet points and numbered items
Code	</>	Inline code and code blocks — perfect for technical articles

Changing the Format Later

Made a highlight as a quote but it should have been a plain paragraph? You can change the format anytime from the sidebar.

Here's a highlight that was created with the default Quote format:

A highlight displayed as a quote — the default format

Click the format icon on the highlight to open the dropdown and pick Paragraph. The change is saved and synced immediately:

After switching to Paragraph — the text is now displayed as plain body text

You can open the dropdown on any highlight to see all available formats:

Change the format of any highlight directly from the sidebar

Formatted Exports

The format carries through to every export path:

• Markdown — headings become #, ##, ###; list items use -; code gets backtick fences.
• Notion — each highlight is created with the matching Notion block type (heading, bulleted list, code block, etc.).
• HTML / PDF — the original HTML tags (<h1>, <ul>, <code>, etc.) are preserved.

This means you can highlight a structured article and paste it into Notion or Obsidian with the formatting intact — no manual cleanup needed.

Keyboard shortcut

Use Alt + A (Windows) or Option + A (Mac) to highlight text with the same format as your last highlight — handy when you're marking multiple headings or list items in a row. See Keyboard shortcuts for all shortcuts.

Further reading

• Multiple Color Highlighting — customize your highlight palette.
• Highlight Images — save images alongside your text highlights.
• Keyboard Shortcuts — speed up your workflow.

You can also read the original deep-dive on this feature in our blog post: