Highlight a specific item in a Query result

Feedback Feature Requests
1

One of my personal use cases for Logseq Queries is to create a list of items or apps that I want to purchase or review (like keyboards, mouse, productivity tools, TFT tools…) and compare them in a single table.

In order to do that I add block properties to each of the items and create a query to create a table of comparison for them. Check out the below screenshot.

Now what I would like to do further is to highlight one or few of the results in a different color. For example in the screenshot below, I would like to highlight the “Todoist” item in the Query table, because I decided to try out Todoist right now based on a few pros and cons (which I might change later).

I would like to have this feature in Logseq.
Is this already possible?

image
image1469×1052 60.4 KB

2

It should be possible by adding some html somewhere in the rendered part of the block that needs to be highlighted, then use a css rule to apply the highlight based on the presence of that html.

3

Are you saying that I can add HTML into the query result
OR
are you suggesting me to use HTML for the blocks that need highlighting?

4
  • I meant to use HTML directly in the content of the blocks that need highlighting (i.e. your second mention).
    • Then CSS could differentiate whether that content is rendered as part of a query or not.
  • Adding HTML into the query result dynamically (i.e. your first mention) could achieve the same thing, but is more demanding.
5

The query table I have attached in the screenshot displays block properties as columns - So,

  • If I use HTML directly in the content, then only one of the column would technically be highlighted right?
  • if I add HTML into the query, it would be more demanding like you mentioned.

Do you have any example for this? It would help me in visualizing what you mean.

6

Something like this:

image
image1007×670 36.2 KB

…could be achieved by adding e.g. <span class="highlight-query-row" /> near the high value and a css rule like:

div.custom-query tr.cursor:has(.highlight-query-row) {
  background: orange;
}
1 Like
7

I have started implementing this and realized that I would ideally want to have the control to highlight rows per query.

For example, I have multiple queries that might refer to the “Todoist” block/page in the above screenshot. But I want the Todoist to be highlighted only in 1 query and not the others.

@mentaloid, any suggestions for this use-case?

8
  • For special cases, could be possible to add some extra html around the query (e.g. to a child block), to help the css rule differentiate.
  • For arbitrary customization, only the hard way:
1 Like