Search Highlight Demo

About This Demo

This site demonstrates the search highlight fix from quarto-dev/quarto-cli#14047. When you navigate to a page with a ?q=term parameter in the URL, matching terms are highlighted with a yellow background. This is the same mechanism used when you click a search result in the Quarto search box.

How to Test

Direct URL highlighting (?q=)

Try these links to see search highlighting in action:

• Pandas page with “data” highlighted
• Visualization page with “chart” highlighted
• Modeling page with “regression” highlighted

These use the ?q=term URL parameter, which triggers JavaScript-based <mark> highlighting on the destination page. The highlights persist until you navigate away or change the search query.

Through the search box

1. Click the search icon in the navbar (or press S)
2. Type a term like “regression”
3. Click on one of the search results

The destination page should scroll to the matching content with JS <mark> highlights (yellow background on matching terms).

Two highlight mechanisms

Quarto search results include two highlight mechanisms in their URLs, each serving a different purpose:

• JS <mark> highlights via ?q= parameter — highlights all matches on the page, persisting until navigation or query change (PR #13442, PR #14049)
• Browser text fragments via #:~:text= in the URL — scrolls to and highlights one specific match, browser-native (PR #14003)

NoteText fragments vs JS marks on fuse.js sites

On sites using fuse.js search (like this one), the two mechanisms don’t coexist. The highlight() function mutates the DOM by wrapping matches in <mark> elements, and this DOM mutation destroys the browser’s text fragment highlight state. As a result, only the JS marks are visible.

On sites using Algolia search (like quarto.org), ?q= is not added to search result URLs and highlight() never runs, so text fragments from PR #14003 are the primary highlight mechanism and work as expected. Making ?q= work with Algolia search is discussed in #13123.

The Bug

In previous versions of Quarto, search highlights were cleared almost immediately. Two issues contributed:

• #9802: Scroll events (quarto-hrChanged, quarto-sectionChanged) cleared highlights whenever the user scrolled the page.
• #14047: Even without scrolling, layout-settling events fired within the first ~24ms and cleared highlights before users could see them.

The Fix

PR #13442 by @jtbayly removed the scroll-based highlight clearing entirely. Highlights now persist until the user navigates away or changes the search query. PR #14049 adds Playwright test coverage for the expected behavior.

Search & Tab Activation

Building on the highlight fix, PR #14053 automatically activates tabs that contain matching content. When a search result points to content inside an inactive tab, the tab is activated so the highlighted match is visible. This works for ungrouped tabs, grouped tabs (overriding localStorage preferences), and nested tabsets.

See the Tabsets demo page for interactive examples, or try these links directly:

• Inactive tab activation — activates Tab Beta
• Nested tab activation — activates both outer and inner tabs
• Grouped tab override — Python activates despite R preference

Content for Searching

This site includes several pages with data science content to provide realistic search targets. Each page covers a different topic — data manipulation with pandas, data visualization, and statistical modeling — with enough prose to exercise the search and highlight functionality across multiple pages.