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

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

8

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.

9

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.

10

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.

11

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

12

Thank you very much for making this plugin.

I am a Chinese user and recently working on some notes on ancient Chinese literature.
The function of this plugin is very helpful to me.

Sometimes "word" in Chinese has only one letter. Especially in ancient Chinese. When organizing notes, I often need to highlight one Chinese letter, but the plugin doesn't work.
I looked up your previous dialog. I changed minChars to 1 and that solved my problem.

But when I was working on some Markdown with English, minChars:1 give me trouble. I had to change it back to 2 again.
So, could you please add a "Settings" UI for Highlight Matching Plugin like other plugins, so that minChars and other values can be easily set?

Thanks again.

1 Like
13

Thanks, I need to check if this will still work on the new codemirror version but I do indeed need to revisit this to add some options and that one would make sense to add.