Highlighting of search results

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?


1 Like

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


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.

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

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.

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?

I’d suggest:

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

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; }

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

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.