Highlight Matching Plugin

Plugins
#1

Highlight Matching Plugin

This plugin highlights words that match what the user has highlighted in the editor.

image
image1141×678 125 KB

Usage

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:
    • Light mode = #d7d4f0
    • Dark mode = #6b6b6b

Repository

10 Likes
Highlight all occurrence of selected word (toggle througt settings)
Plugin List
#2

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.

Would that be tweakable? What's your opinion?

#3

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 addon simply doesn't have that many options:

    style: "matchhighlight",
    minChars: 2,
    delay: 100,
    wordsOnly: false,
    annotateScrollbar: false,
    showToken: false,
    trim: true

// 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.
1 Like
#4

Both options could be useful indeed. I think the wordsOnly will do what I want, even if it's not clearly stated by the doc.

#5

really like this plugin, thank you!

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...

1 Like
#6

Hello @Daeraxa
Did you have a chance in the past weeks to look into exposing minChars and wordsOnly options or not yet?
Thanks!

#7

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.