Hex Number Color highlighter


#1

Is there a way to have the Hex number for a color highlight to the specified color in the editor?


#2

like https://atom.io/packages/pigments ?


#3

Yes. But one that would work for the Cloud9 editor


#4

One could build this as a plugin fairly easily…


#5

Being new to coding, this would be out of my league for now.


#6

I would like to see this as well. It’d come in handy.


#7

Eh, I’ll take a whack at it.

edit: Been working on this just a tad, and the easiest way is to just make a hotkey command (ctrl-shift-j) or (cmd-shift-j) to trigger the highlighting.

Got the command added, got ace coming in, now just have to parse the file for color codes eg. #123, #123456, rgb(1,2,3), rgba(1,2,3,4) … Then add markers at their location using their own color code.

update: I have the hex highlighting working on command.

I’ll start working on the rgb and rgba ones as well.

update: I have the rgb and rgba working as well.

I’ll start working on turning off the highlighting

You can disable highlighting by using the command ctrl-shift-alt-c or on mac command-shift-alt-c respectively.


#8

Nice work! Have you put this plugin on Github?


#9

Looks Awesome. It would be great if i could add that to my c9


#10

It is on github and I have published it. However I’m having issues installing it into another workspace.

Here is the github link https://github.com/shadowcodex/c9.ide.pigments

Thanks,
Shannon

Edit: even though I run the c9 install plugin command the plugin doesn’t show up under the plugin manager.

Double Edit: You have to go into preferences>Experimental>SDK and enable Load Plugins From Workspace and Load Custom Plugins


#11

Thank you sir, I got it working. Appreciate you coming up with a solution so fast


#12

Sure thing! It was fun!

It may be a tad buggy, if you see any issues in usage please submit an issue on github and I’ll maintain the plugin.


#13

Version 1.3.1 update:

I have added a function called reports. To update just install the plugin again with the --force tag. Then reload your c9 ide.

The new function can be accessed with the following commands

  • mac: command-shift-alt-g
  • win: ctrl-shift-alt-g

it will generate a very nice report of all colors in your project and various color palettes for them.

Here is a sample screenshot:


#14

Thanks shadowcodex just what I was looking for!
This is so useful I wish it was built into c9