vim-css-color icon indicating copy to clipboard operation
vim-css-color copied to clipboard

Custom highlights

Open albfan opened this issue 5 years ago • 3 comments

Using functions to create rgb colors is pretty command in UI, if you want to check what color you're creating would be interesting to add custom highlights for a file:

Real example:

Defining colors for a graph point:

https://gitlab.gnome.org/GNOME/gnome-power-manager/-/blob/master/src/gpm-statistics.c#L794

Captura de pantalla de 2020-08-23 14-07-01

Adding comments after each line (and converting to hex is a workaround:

Captura de pantalla de 2020-08-23 14-04-57

but would be nice if we are able to highlight just the function:

Captura de pantalla de 2020-08-23 14-28-02

That would be something like automatize:

:syn match BGFF0000 "255, 0, 0"
:syn match BG0000FF "0, 0, 255"
:syn match BGC80000 "200, 0, 0"
:syn match BG0000c8 "0, 0, 200"
:syn match BGFFFFFF "255, 255, 255"
:syn match BG00FF00 "0, 255, 0"

albfan avatar Aug 23 '20 12:08 albfan

You can avoid having to convert to hex, at least, by turning on CSS expression parsing:

:call css_color#init('css','none','')

… and just copy-pasting to a comment:

point = egg_graph_point_new ();
point->x = (gint32) up_history_item_get_time (item) - offset;
point->y = up_history_item_get_value (item);
if (up_history_item_get_state (item) == UP_DEVICE_STATE_CHARGING)
	point->color = gpm_color_from_rgb (255, 0, 0); // rgb(255, 0, 0)
else if (up_history_item_get_state (item) == UP_DEVICE_STATE_DISCHARGING)
	point->color = gpm_color_from_rgb (0, 0, 255); // rgb(0, 0, 255)
else if (up_history_item_get_state (item) == UP_DEVICE_STATE_PENDING_CHARGE)
	point->color = gpm_color_from_rgb (200, 0, 0); // rgb(200, 0, 0)
else if (up_history_item_get_state (item) == UP_DEVICE_STATE_PENDING_DISCHARGE)
	point->color = gpm_color_from_rgb (0, 0, 200); // rgb(0, 0, 200)
else {
	if (g_strcmp0 (history_type, GPM_HISTORY_RATE_VALUE) == 0)
		point->color = gpm_color_from_rgb (255, 255, 255); // rgb(255, 255, 255)
	else
		point->color = gpm_color_from_rgb (0, 255, 0); // rgb(0, 255, 0)

Not a great solution, but a workaround that you can use immediately at least.

Beyond that, I’ll have to think about how to do this.

ap avatar Aug 23 '20 14:08 ap

hmm, rgb is a nice trick.

Using:

:call css_color#init('css','none','cBlock')

I'm playing with s:_csscolor. This diff get my started:

$ git diff
diff --git i/autoload/css_color.vim w/autoload/css_color.vim
index 1ccaae1..b3580a9 100644
--- i/autoload/css_color.vim
+++ w/autoload/css_color.vim
@@ -144,6 +144,7 @@ function! s:create_syn_match()
                let rgb_color
                        \ = funcname == 'rgb' ? s:rgb2color(submatch(3),submatch(4),submatch(5))
                        \ : funcname == 'hsl' ? s:hsl2color(submatch(3),submatch(4),submatch(5))
+                       \ : funcname == 'gpm_color_from_rgb ' ? s:rgb2color(submatch(3),submatch(4),submatch(5))
                        \ : strlen(hex) >= 6  ? tolower(hex[0:5])
                        \ : strlen(hex) >= 3  ? tolower(hex[0].hex[0].hex[1].hex[1].hex[2].hex[2])
                        \ : ''
@@ -200,7 +201,7 @@ endfunction
 
 let s:_hexcolor   = '#\(\x\{3}\%(\>\|\x\{3}\>\)\)' " submatch 1
 let s:_rgbacolor  = '#\(\x\{3}\%(\>\|\x\%(\>\|\x\{2}\%(\>\|\x\{2}\>\)\)\)\)' " submatch 1
-let s:_funcname   = '\(rgb\|hsl\)a\?' " submatch 2
+let s:_funcname   = '\(rgb\|hsl\|gpm_color_from_rgb \)a\?' " submatch 2
 let s:_ws_        = '\s*'
 let s:_numval     = s:_ws_ . '\(\d\{1,3}%\?\)' " submatch 3,4,5
 let s:_listsep    = s:_ws_ . ','

Captura de pantalla de 2020-08-23 16-40-15

But still has to ignore the function name (with contained or similar)

If I found something more general than my use case (a general extension valid for more use cases I will let you know)

Would be interesting to find different interesting use cases

albfan avatar Aug 23 '20 14:08 albfan

Right now this allows me to see the color without include text only useful to understand the colors involved, which is really great.

Other interesting things:

  • add the result color at the end of the line like three solid block or similar

In general what this issue looks for is for a custom parse regexp that discover a color definition (R,G,B in my use case) and paint it as a info layer somewhere for each match.

albfan avatar Aug 23 '20 14:08 albfan