Feature | Highlight result in the page itself.

[linguistpage]

Dear team, Thank you so much for sharing is amazingly easy to implement search feature.

Is it possible to Highlight the result text after selecting the page from the search result?

Something like what MKDOCS have using Lunr.js here: https://squidfunk.github.io/mkdocs-material/getting-started/

Thank you in advance, Tarek

[bglw]

Good idea.

I think a good path to implementing this would be:

• Add an option to the Pagefind UIs to include the search term as a query or hash parameter for results, much like MkDocs does
• Add some /pagefind/pagefind-highlight.js script that can be optionally included on pages that wraps the search results in <mark> elements
• Niceties: The highlight script can use signals like data-pagefind-ignore and data-pagefind-body to perform more relevant highlighting

[Jothsa]

I might be able to work on this. I have a busy schedule so don't want to commit fully in case I'm unable to. I've made some progress but am having trouble wrapping my head around the project's structure. Where should the files be created? How would I add pagefind-highlight.js so that the user can import it? Should the css for highlighting the mark elements be included in a file for the user to import or should the styling be left to the user? I think it would be nice to add some default styles, but it might not be worth it to import a separate file since it would only be a couple of lines. Thanks!

[bglw]

Hey @Jothsa 👋

No stress on committing fully to any changes, but much appreciated nonetheless!

Sorry that the project structure is a little esoteric — I've wired up a placeholder for this file on the highlight-script branch, so feel free to base work on that as a starting point.

The relevant (typescript) file is here: https://github.com/CloudCannon/pagefind/blob/b73433cdf90b32eb0ce7915f147a9201064481e7/pagefind_web_js/lib/highlight.ts#L1

And that is set to get built through Pagefind and output as /pagefind/pagefind-highlight.js. (See the commit on highlight-script for the details on that plumbing, if curious).

To test this, I have created a test file for this feature here, which is currently passing: https://github.com/CloudCannon/pagefind/blob/b73433cdf90b32eb0ce7915f147a9201064481e7/pagefind/features/highlighting/base.feature#L1-L18

For the available step definitions in these test files, have a browse through the other .feature files in repo and skim their usage.

For workflow:

1. Modify the highlight.ts file
2. Run npm run build-coupled in the pagefind_web_js directory
3. Run ./test.sh "Highlight script is loaded" in the pagefind directory to run a specific test scenario by name
4. Or run ./test.sh to run all tests i. Let me know if you're on Windows and get stuck — I can dig a working command up
5. For testing against a real site of your own: i. I usually run cargo build --release in the pagefind directory ii. From the directory of some real site, I would run ../pagefind/target/release/pagefind --site public --serve (With the path to Pagefind and the path of the site fixed, of course)

Let me know if that helps, and if you have any other questions!

[bglw]

Should the css for highlighting the mark elements be included in a file for the user to import or should the styling be left to the user?

I think since the styles will be so minimal, I would start with setting them as inline styles, with some option to disable that and set a custom classname instead.

[Jothsa]

Thanks so much!

[Jothsa]

@bglw, would it be possible to add mark.js as a dependency or should I just code the highlighting function myself 😅 The library was recently updated and has several features that would be helpful such as exclusion selectors (for [pagefind-ignore]), and context (to limit to [pagefind-body]). I totally understand not wanting another dependency, though.

[bglw]

@Jothsa I think using mark.js is fine — looks like es6 minified is around 14kb / ~7kb gzipped, which I'm happy with for the features it brings!

ignorePunctuation is another feature it has that will be good to match Pagefind with 🙂

[Jothsa]

I think I've got it working. Still need to write the .feature file. I'll make a pr this weekend, maybe sooner. I noticed that the pagefind results link now include the .html extension. This breaks my site. For example my site expects /blog/post but pagefind links to /blog/post.html. Did I somehow change something, is that a problem on my end, or is that a change with 1.0? Thanks!

Looks to be a problem on my end. Not sure why.

[bglw]

Hmm let me know what you find — .html extensions are retained for non-index.html files, but index files should be given clean URLs. Almost all of the tests assume this behavior, so hopefully if anything was intrinsically wrong it would have been caught by now 😅

(There is a keepIndexUrl setting when indexing, if you happen to have set that by accident)

[Jothsa]

Still don't know what's happening with the .html. I'll have to take a good look this weekend. I'm pretty sure it's a me problem. All the tests pass. I made a pr.

Edit:

Turns out I needed to add this to my top-level layout

export const trailingSlash = 'always';

[bglw]

Released in v1.0.4 🎉 (thanks @Jothsa !)