What is the highlight_keywords MarkdownIt plugin for?

While investigating how to Resize images, I was poking around the MarkdownIt plugins and couldn’t quite figure out how the higlight_keywords plugin is used.

I think the problem is I don’t see where the keywords are set. At first I thought it was what handled the highlight functionality when using the Find tool, but after fiddling around a bit I don’t think it’s that.

I’m mostly just curious, so I can build a better understanding of the codebase.

I guess it’s for syntax highlighting of code?

highlight_keywords is a plugin defined in lib/renderers/MdToHtml/rules/highlight_keywords.js it is used to highlight words that match search queries. I would also have thought it would be from the find tool, but it might just be the full database search?

Take a look line 813 in ReactNativeClient/lib/components/screens/note.js for an example of where the keyword list is created.

And here is an example of how it looks on my computer (with joplin as the search term)

1 Like

@CalebJohn is correct, it’s indeed a plugin that wraps the given keywords in a .highlighted-keyword SPAN tag, so that they can be highlighted with CSS.

If you make changes to this class or other MdToHtml classes, please keep in mind that they are being moved to a separate repository. Probably it will still be easy to merge any change you might make, but maybe something to keep in mind. That new repo is there in case you want to check if your changes will be affected by the refactoring: https://github.com/laurent22/joplin-renderer

1 Like