search

ryu1kn / vscode-text-marker

Visual Studio Code Extension. Select text in your code and mark all matches. The marking colour is configurable
https://marketplace.visualstudio.com/items?itemName=ryu1kn.text-marker
MIT License
87 stars 17 forks source link

Transparency/opacity setting for highlights #23

Closed philip-n closed 6 years ago

philip-n commented 6 years ago

I'm using text marker to highlight specific block of code via regex, which works great. Thanks for developing and maintaining this extension!

However, it seems like Text Marker paints "between" the text and the VSCode background. I'll try to make my meaning clearer:

Top layer: Code Mid layer: Highlight from Text Marker Bottom layer: Background from VSCode

As the highlights from text marker are non-transparent, they hide the things that VSCode displays in the background (e.g. vertical lines for indents, display of matching braces, ...).

Is it possible to introduce a transparency setting, to allow to see the background through the highlight? Or is there already such a setting or workaround that allows this?

ryu1kn commented 6 years ago

Hello @philip-n , thanks for your suggestion and the explanation of why you want it! I got your point.

At the moment there is no such settings, but as Code allows us to pass opacity for the markup, it shouldn’t be difficult to introduce one.

https://code.visualstudio.com/docs/extensionAPI/vscode-api#DecorationRenderOptions

I’ll see if setting transparency does make vertical indent lines, matching braces stay visible.

ryu1kn commented 6 years ago

Shame, it's not as easy as I though it would. Giving opacity makes just the text opaque but not the background colour...

To make indentation lines and matching braces colours visible, we need to change the background colour opaque. Currently user can give any colour specs to Text Marker (like #ddd, darkgray or rgb(100, 100, 100)) but we need to convert it to RGB value and give opacity like rgba(100, 100, 100, 0.3).

ryu1kn commented 6 years ago

Actually, so even now, if you give rgba colours to textmarker.highlightColors (like "rgba(184, 134, 11, .3)"), you can make indentation lines and matching braces under highlight visible.

You need to manually define all the colours with opacity values, but it solves your problem... 😃

philip-n commented 6 years ago

Amazing! I've been using custom hex values anyways, so changing to rgba is a) no big deal and b) perfectly solves my problem. Multiple highlighted patterns even seem to stack correctly, i.e. 2x white at 50% results in 100%.

Thanks for the quick response, much appreciated!

ryu1kn commented 6 years ago

Awesome!

I’ll leave this issue open to explore the possibility of introducing an opacity config which all colours respect unless they have opacity specified on its own.

Or i might just end up converting defaul colours to rgba for now...

ryu1kn commented 6 years ago

Currently user can give any colour specs to Text Marker (like #ddd, darkgray or rgb(100, 100, 100)) but we need to convert it to RGB value and give opacity like rgba(100, 100, 100, 0.3).

Maybe we can use this library. https://www.npmjs.com/package/color-rgba

ryu1kn commented 6 years ago

Released as v1.7.0! @philip-n Thank you for the idea :tada: