Cross-Node Highlighting

About This Feature

Quarto’s search highlighting wraps matching text in <mark> elements. Previously, this only worked when the entire search term lived inside a single HTML text node. If a match spanned across element boundaries — like bold followed by plain text, or inline code followed by prose — the highlighter couldn’t find it and silently skipped the match.

PR #14080 by @vezwork fixes this by collecting text across adjacent DOM nodes and applying highlights that correctly span element boundaries.

Bold + Plain Text

When text starts inside a <strong> element and continues as plain text, the search term crosses a node boundary.

The crossbold-unique feature enables robust text matching across formatted content.

How to test: Search for “crossbold-unique feature” — the highlight should span from inside the bold text into the plain text that follows.

Test: crossbold-unique feature

Inline Code + Text

When text starts inside a <code> element and continues as prose, the search term crosses from monospace into regular text.

Use the crosscode-unique library for building search interfaces with highlighting support.

How to test: Search for “crosscode-unique library” — the highlight should span from inside the inline code into the following word.

Test: crosscode-unique library

Multiple Inline Code Spans

When a search term spans across multiple <code> elements with plain text between them, the highlighter must bridge three or more nodes.

The crossmulti-alpha and crossmulti-beta methods work together to process search results.

How to test: Search for “crossmulti-alpha and crossmulti-beta” — the highlight should span across the first code span, the plain text “and”, and the second code span.

Test: crossmulti-alpha and crossmulti-beta

Italic + Plain Text

When text starts inside an <em> element and continues as plain text, the search term crosses an emphasis boundary.

The crossitalic-unique toolkit provides utilities for text processing and search indexing.

How to test: Search for “crossitalic-unique toolkit” — the highlight should span from inside the italic text into the plain text.

Test: crossitalic-unique toolkit

Link + Plain Text

When text starts inside an <a> element and continues as prose, the search term crosses a hyperlink boundary.

The crosslink-unique documentation covers installation, configuration, and advanced usage patterns.

How to test: Search for “crosslink-unique documentation” — the highlight should span from inside the link text into the following word.

Test: crosslink-unique documentation

Syntax-Highlighted Code Block

Code blocks with syntax highlighting contain many <span> elements for different token types (keywords, strings, identifiers). A search term that appears in the code will often span multiple syntax highlighting spans.

def crosssyntax_highlight_demo(query, results):
    """Process search results and apply highlights."""
    for result in results:
        if query in result.text:
            result.highlighted = True
    return results

How to test: Search for “crosssyntax_highlight_demo” — the highlight should appear on the function name even though syntax highlighting may split it across <span> elements.

Test: crosssyntax_highlight_demo

How to Test