Search results not in monospace font

[jhasse]

The preview of lines in the search results aren't using a monospace font. Syntax highlighting would also be great.

This is what it currently looks like:

This is a quick mock-up I've made:

[egamma]

@jrieken @bgashler1 fyi

[felixfbecker]

The search query itself should also use a monospaced font. In the end, you are searching in code, so you write code inside this text box and it should be formatted like code. It is very hard to write complex regexps with a non-monospaced font.

[atombender]

Any progress on this? I'm continually squinting at the tiny search panel.

Also: Syntax highlighting both in the search field and the matches. Regular expressions should have a grammar for groups and other non-literals. And search results should be syntax-highlighted just like the editor.

Also: Maybe do something to make the file name sections a bit more prominent. There's no distinction between a file name and the subsequent match within a file, since they are all rendered in the same font and colour, and it gets muddled. A slightly different background colour would help a lot.

[esutton]

+1

Supporting comment color in query results would be very helpful to find results in code rather than in comments or visa versa.

[lehni]

You can achieve this with the Custom CSS and JS Loader extension:

.search-view .input,
.search-view .match {
  font-family: Menlo, Monaco, 'Courier New', monospace !important;
}

[josalhor]

If this is ever gets implemented (I hope so) the quick search and the search in the left sidebar should be treated equally.

It worries me a little that it may reduce the amount of text it fits before overflowing. Should it be a little larger? Specially on large screens.

[roblourens]

We tried this in the past, also in similar places like the "find all references" peek view, it was very divisive and most people considered it ugly. One problem is that you have monospace code mixed in with non-monospace file names/paths, another is that it will never be syntax highlighted, this is not possible with the way search currently works, and monospaced but non-highlighted code looks bad. And finally the search widget just isn't a place optimized for reading code. Some day we will show search results in an editor and hopefully that will look nicer for you.

[atombender]

it was very divisive

So make it configurable?

[Salamandar]

I don't even understand why you closed this issue.

[lehni]

It seems strange to me that VSCode is opinionated about something being ugly, where it leaves such decisions to the users in all other places. Mixing monospaced fonts with non-monospaced ones isn't ugly, it's a visual hierarchy that makes it clear what the different texts are: One is code, and one is a UI element describing where this code is from. Also, monospaced fonts not being syntax highlighted isn't necessarily a problem. It still makes it clear that what you're looking at is part from your code document, and hence it's using the same font. It's a visual clue that helps the eye parse the information it is looking at faster. And as such, it does make a whole lot of sense.

[lehni]

Having said that, I now use the Customize UI extension with this setting to achieve what I want:

"customizeUI.stylesheet": {
  ".search-widget textarea, .find-widget textarea, .search-view .results .match": "font-family: Menlo, Monaco, 'Courier New', monospace !important"
}

And here how this looks in action (using Akkurat Mono by Lineto.com, my all time favorite coding font):

[karlhorky]

Some day we will show search results in an editor and hopefully that will look nicer for you

FYI, in case this is useful to anyone, the part from @roblourens' quote above about "show search results in an editor" can now be accomplished with the "Search Editor" feature (just like in Sublime Text):

https://code.visualstudio.com/updates/v1_43#_search-editors

[doivosevic]

Having said that, I now use the Customize UI extension with this setting to achieve what I want:

"customizeUI.stylesheet": {
  ".search-widget textarea, .find-widget textarea, .search-view .results .match": "font-family: Menlo, Monaco, 'Courier New', monospace !important"
}

And here how this looks in action (using Akkurat Mono by Lineto.com, my all time favorite coding font):

Does this still work with the same selector? I cannot get it to work on my machine

[lehni]

@doivosevic I just checked, it still works for me.

[a1031]

Having said that, I now use the Customize UI extension with this setting to achieve what I want:

"customizeUI.stylesheet": {
  ".search-widget textarea, .find-widget textarea, .search-view .results .match": "font-family: Menlo, Monaco, 'Courier New', monospace !important"
}

@lehni This works perfectly, thanks!

How did you find the classnames for the search field UI elements? I'd like to also apply the style to the files to include and files to exclude textareas:

I tried using these class names found in the vscode.dev online editor, but none of them worked:

• .search-widgets-container textarea
• .query-details textarea
• .file-types textarea