Search Highlight Demo

About This Demo

This site demonstrates search highlighting improvements in Quarto. 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.

Recent improvements include persistent highlights (PR #13442), tab activation for search matches (PR #14053), and cross-node highlighting that works when a search term spans across HTML element boundaries like bold text, inline code, or syntax-highlighted spans (PR #14080).

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

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

Cross-Node Highlighting

PR #14080 by @vezwork fixes search highlighting when a match spans across HTML element boundaries. Previously, if you searched for “bold text” and the page contained <strong>bold</strong> text, only one part would highlight. Now the highlighting correctly wraps across node boundaries.

See the Cross-Node demo page for interactive examples, or try these links directly:

• Bold + plain text — highlight spans a <strong> boundary
• Inline code + text — highlight spans a <code> boundary
• Multiple code spans — highlight spans 3 nodes
• Italic + plain text — highlight spans an <em> boundary

Hash Fragment Navigation

When a search result links to a specific section (e.g., page.html?q=term#section), the browser should scroll to the #section anchor, not to the first <mark> match on the page. Previously, scrollToFirstVisibleMatch() unconditionally overrode the browser’s hash navigation, scrolling away from the target section to wherever the first match appeared in the DOM.

Additionally, the ?q= parameter was removed from the URL too late — after quarto-nav.js had already resolved all link href attributes against window.location. This baked ?q= into TOC and sidebar links, causing them to trigger full-page reloads instead of smooth in-page navigation.

The fix moves URL cleanup to module load time (before any DOMContentLoaded handlers) and skips scrollToFirstVisibleMatch when a hash fragment is present.

Try these links on the Tabsets page to test hash-fragment navigation:

• Tabsets page with search + hash — should land at “Grouped Tabsets” section with marks visible elsewhere
• Tabsets page with search + nested hash — should land at “Nested Tabsets” section

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.