Highlighting of search results

Features
1

I use ==mark== syntax a lot. Unfortunately, search results in notes are highlighted in the same manner and with the same color as the marked text.

Could you use 2 different styles for marked text and highlighted search results?

Thanks

1 Like
2

Yep, I always thought we should change the color of the search results so that they can be differentiated from ==mark==.
I don’t know where in the Joplin code this is done, but I will try to find out.

But maybe there’s something we can do with userstyle.css (unless both are using <mark>).

2 Likes
3

I noticed that:

  • ==mark== syntax becomes <mark>example2</mark>
  • when performing global search, words are highlighted this way:
    <mark data-markjs="true">searchedword</mark>
  • when performing search within a note:
    • all occurrences are highlighted this way
      <mark data-markjs="true">searchedword</mark>
    • but the currently selected occurrence (because in local search you can skip to next/previous occurrence with arrows) is highlighted this way:
      <mark data-markjs="true" class="mark-selected">selectedoccurrence</mark>

Maybe you could create a new mark class for ==mark==, e.g. class="user-mark", so you can use standard mark class for search results.

4

@desk7 do you know how to work with React and nodejs? Depending on what is said, if this becomes a task, you can always ask to be assigned it. That’s what i did for my current task.

5

Hmm, we use a plugin for the mark syntax, so if there's no option to add a custom class, we can't do that - unless we get the mark plugin author to add such a feature.

Maybe Laurent has an idea how to approach this. If we know how we can do this, implementing it is just the next step.

6

Changing the colour shouldn’t be too difficult. We need three different colours:

  • To highlight the search results (currently orange)
  • To highlight the current search result (currently red/orange)
  • To highlight marked text (currently orange too)

What new colours would you suggest?

7

I’d suggest:

  • To highlight the search results (orange)
  • To highlight the current search result (red/orange)
  • To highlight marked text (lightgreen)
8

I agree with @desk7’s scheme, but just to satisfy my curiosity I tried if I could manage this myself by userstyle.css. It’s not that difficult:

mark                            { background-color: #BBDD66; }
mark[data-markjs]               { background-color: #F3B717; }
mark[data-markjs].mark-selected { background-color: #CF3F00; }

Or, if you want green and orange switched, just:

mark[data-markjs]               { background-color: #BBDD66; }
mark[data-markjs].mark-selected { background-color: #6B8E23; }
3 Likes
9

This is a great tip and maybe you could add it to one of the 2 css topics where people share their css. This could help others a lot.

@laurent I still think we should change the default color as @desk7 suggested, otherwise the coloring is not too clear and rather confusing out of the box.

1 Like
10

Done. I favored Share your CSS, as it focusses more on styling itself and what users can do with CSS, where Custom stylesheets is more aimed at Joplin’s architecture around this subject.