Highlight Matching Plugin

Highlight Matching Plugin

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

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

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?

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

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.

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

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

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.

It is just a plain CSS file so in this case you need to edit userchrome.css (the "Joplin-wide app styles" one).

You can just paste in each bit in its own section so if it is empty you can just put in

.cm-matchhighlight {
  background-color: #ffff00 !important;
}

And just select the hex or any other colour value you want.

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.

I replied with he following in the other thread:

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