Simply toggle the plugin on and highlight a word, matching strings will also be highlighted.
The plugin activates the CodeMirror addon search/match-highlighter with the default options set.
The background highlighting is provided by CSS matching the new CSS class of .cm-matchhighlight. This can be overridden using CSS in userchrome.css with the !important option.
Customising
Currently the options for match-highlight are hard coded but I'll be looking at exposing some of them to the Joplin settings in a future version.
Known issues & limitations
Can't currently see a way of only highlighting if the highlighted word occurs >1 - default behaviour of the addon is to apply .cm-matchhighlight to anything highlighted.
Does not respect the application theme yet - by default the highlight match is the same colour as provided by the default light theme highlight colour. See the usage section to amend the highlight colour manually. For reference:
Thank you!
Imo, the comparison should be strict, ie a "full word". For instance, if I double-left-click on the word "foo", that hightlight it obviously, but it should not hightlight "foo" in the word "foobar".
For small words that is annoying, because it will hightlight a lot in a big note.
There are two options that I was thinking of exposing to the Joplin settings page for user tweaking:
minChars: - "minChars is the minimum amount of characters that should be selected for the behavior to occur"
and wordsOnly: - "If wordsOnly is enabled, the matches will be highlighted only if the selected text is a word"
I don't know if wordsOnly in fully supports what you want as it sounds like it only works based on the selected word being a full word rather filtering the results to not show substrings in longer words.
// The option can be set to true to simply enable it, or to a
// {minChars, style, wordsOnly, showToken, delay} object to explicitly
// configure it. minChars is the minimum amount of characters that should be
// selected for the behavior to occur, and style is the token style to
// apply to the matches. This will be prefixed by "cm-" to create an
// actual CSS class name. If wordsOnly is enabled, the matches will be
// highlighted only if the selected text is a word. showToken, when enabled,
// will cause the current token to be highlighted when nothing is selected.
// delay is used to specify how much time to wait, in milliseconds, before
// highlighting the matches. If annotateScrollbar is enabled, the occurrences
// will be highlighted on the scrollbar via the matchesonscrollbar addon.
noticed there's a typo here. should be .cm-matchhighlight. the first mention in the post had the right spelling but unfortunately for me I copied from this line...
Not just yet, I've had a horrendous couple of weeks at work and just not had the energy to look into it on the weekends so far, it is still on my radar, it just requires a fair bit of learning on my end to understand the settings part of the API (and, lets be honest here, javascript in general).
If you desperately need it then the options are exposed in the matchhighlight.js file if you fancied changing it and compiling it yourself.
What do i need to add to the css markdown for rendered stylesheet for the highlighting to work? Its currently a blank text file. I know I need to add something as I am using Dark Mode, but Im just a bit lost.
Hey Daeraxa -- thanks for the reply. I think I got it to work.
Do you know how I can make the searched term highlighted in the preview pane? It currently only highlights in markdown view.
It is only a very simple plugin that simply activates a mode already built into codemirror (the editor used for the markdown editor) so therefore doesn't do anything in the richtext or rendered views which would take a lot more work to implement (not out of the question in theory but its a whole different animal).
