Highlighting search terms

Pagefind includes the ability to highlight search terms on the result page.

To enable this feature, first configure Pagefind to insert a query parameter on search results.

#Configuring highlighting via the Default UI

new PagefindUI({
    element: "#search",
    highlightParam: "highlight"
});

#Configuring highlighting via the JavaScript API

const pagefind = await import("/pagefind/pagefind.js");
await pagefind.options({
    highlightParam: "highlight"
});
const search = await pagefind.search("static");

#Enabling highlights on result pages

Once Pagefind is configured to insert query parameters, pages on your site will need to opt-in to highlighting. This is something you can implement for your own site by looking at the query parameter, but Pagefind provides a highlighting script for convenience.

To opt-in, import /pagefind/pagefind-highlight.js on all pages of your site and create a new PagefindHighlight object.

<script type="module">
    await import('/pagefind/pagefind-highlight.js');
    new PagefindHighlight({ highlightParam: "highlight" });
</script>

Ensure that the highlightParam configured here matches the highlightParam given to Pagefind when searching.

To see all options available to PagefindHighlight, see Highlight Config.