enyancc/vscode-ext-color-highlight

Extension adds colored border around css/web colors in the editor

vscode-ext-color-highlight

This extension styles css/web colors found in your document.

Install

In VSC press Ctrl+Shift+P (Cmd+Shift+P on Mac) then type ">ext install", hit enter, search "Color Highlight".

Still confused? Click "Get Started" above.

Questionnaire

Please answer the questions in this questionnaire. Your feedback is very valuable and will help me improve this extension. https://goo.gl/forms/5emac4WyQv7CWZOK2

Contributors

• chadgauth - Support for LCH color format
• LucasMatuszewski - Support for floating-point numbers in hsl and rgb
• lochstar - Styling modes for the marker

Feel free to contribute!

vscode-ext-color-highlight's Issues

Highlights non-color array keys in Drupal PHP code

For one reason or another, in Drupal, many predefined array keys start with a hash. This plugin highlights them if they happen to start with a string of characters that is a valid hex color, for example anything that starts with #default.

Accidental highlighting of strings like "#1234567890"

Noticed that the parser sometimes sees a string like "#123456789" and highlights "#123456" as a color. The parser should probably be more strict, and not highlight it's not strictly in hex format (eg more than 6 characters or one of the values out of hex range).

Option to only show rectangle

Can you please add an option to only show the colour rectangle in front of the colour code/name? I don't actually want the colour value itself to get coloured. Too distracting.

Hex colors starting in 0x

Hello, is it possible to add support to hex color int starting in 0x? (Like 0xFFFFFF, equivalent to #FFFFFF) Thanks in advance!

Extention breaks VSCode's Extention Host when importing invalid files in SASS files

Reproduction:

• Install this extension (Color Highlight)

• Install Live Sass Compiler extension

• Create a new .scss file

• Type in exactly this (don't copy-paste, literally type it in):

@import " ";

This is enough to break VS Code's Extention Host, which results in all extentions breaking, including git control.

I get this behaviour

Also tested on Visual Studio Code Insiders (everything's the same, still breaks)

---

Update

If you only have one of the two extensions installed, the extension host does NOT crash, but combine them both and it does, which is annoying. I think that the root problem is coming from vscode-ext-color-highlight, because it's the one who's throwing the error.

Any way to resolve this?

The completely same issue has been asked on vscode-live-sass-compiler extension repo too. They too believe it's vscode-ext-color-highlight to blame, hence I'm posting this issue here.

Highlight variables in JS files?

Hi. Great plugin. I've seen numerous requests for highlighting sass variables, but none addressing JS variables. Is this meant to work by default? Is there an option that enables this functionality?

As you can see from the screenshot below, VSCode doesn't highlight the constants tomato etc. in the file.

Incorrect Stylus Variable Highlighting

Stylus variables aren't being highlighted correctly. For example, the $GRAY_* variables that have two-digit numbers here are all matched to $GRAY_1:

Another issue worth noting in this image - the text for hsl(0, 0%, 100%) has white text on the white background, making it unreadable. It would be nice if it was black like the HEX values.

My software:

• OS: Ubuntu 14.04
• Visual Studio Code: 1.14.2
• Color Highlight: 2.3.0

Please consider adding a CHANGELOG.md

Updates in VS Code don't tell us what has changed. You do have it in the readme, but enabling this feature follows the common pattern of putting in a CHANGELOG.md.

Please consider adding a CHANGELOG.md

Feature Request: Setting to disabled colors in scrollbar

I love this extension, especially with the new background setting.

However, I've found that it adds some sort of mini map in the scrollbar of all highlighted colors in my file:

Can we get a setting to be able to disable this feature? I find it distracting and unnecessary.

Wrong highlighting in CSS

Have some CSS:

Extension highlight part of selector #bac. I think search must be inside {} and exclude selector names

Using:

• Visual Studio Code 1.5.3
• Color Highlight 1.2.1

@import in scss file seems stop this plugin rendering

I am using a trick to pull in the bootstrap defaults so can then create derived values in a different scope and force export my variables as !global as need.
For trick see https://stackoverflow.com/a/38225564/103491.

It appears that the @import in the scss file stops hilighter from working in the file.

I am on windows 10 in vscode 1.16.1

Without the @include

support hex alpha

Could you add support for hex alpha?
It s as simple as changing your regex to support length 4 and 8.

Thanks!

It is not supported in stylus

It is not supported in stylus although i add this to settings

"color-highlight.languages": [
    "javascript",
    "scss",
    "css",
    "sass",
    "less",
    "php",
    "xml",
    "html",
    "json",
    "styl",
    "stylus"
  ]

Suggestion: recognize %23 as #

There are areas in data URIs where we might have colors, but they are not displayed because # are not supposed to be in data URIs.

hex highlight 0xffffff

Hi, its possible to add feature for detect code like 0xffffff ???

example

     var lineX_ = new PIXI.Graphics();
            console.log('lineX_: ', lineX_);
                lineX_.lineStyle(48, 0xffffff);
                lineX_.moveTo(0,0);
                lineX_.lineTo(1600*2, 0);
                lineX_.pivot.x = lineX_.width/2;
                lineX_.alpha = 0.4;

thanks

Breaks VSCode on SVG files

Details microsoft/vscode#14206

Show color of Sass variables?

Would it be possible to show the color of a Sass variable?
For example, if I have a variable declared like this in my Sass setup:

$primaryColor: #77baa8;

which is then used like this:

&.div { background-color: $primaryColor; }

It would be very handy if $primaryColor in the latter example got color highlighted with #77baa8

Colors right over selection highlight

Color definitions are colored right over the selection highlight, making it hard to tell what is selected, especially if it is only the color definition.

Here's an example:

Is it possible to use marker in a gutter?

I've recently switched to VSCode and i added this extension. Coming from Atom, i used Pigments which has an option to show colors in the gutter of the editor. Is it possible to implement something like this in Color Highlight?

i'm referring to this

it's do not work in '.vue'

yesterday, my vscode update to 1.10.1.

the color is not highlight in vue.

but it's work in last vscode version.

why?

(my english is poor , sorry

Colorization of the text is broken with some rgba values

Hi

The colorization of the text is broken with certain rgba values, see screenshot:

Above is "rgba(255,255,255,0)" which should also get the treatment that "#000000" gets.

Colors non-colors

Hex sequences that are not colors get highlighted, too. Like this:

wrong alpha RGBA reading for haxe/haxeflixel language

var color:FlxColor;
color.setRGB(0,204,255,255);
//this blue color R G B A , i need change alpha because sometimes
//i use variable earlier with other color

but extension show me nothing. look like the patterm ignore data if data have 4 incoming params, but take in case of 3 params. And replacing 0 to 0.5(float) destroy the marker placeholder. In python sometimes the color can have float values.

white in white-space is colored

#text{
    white-space: pre-wrap;
}

White is colored white, but it should not be colored at all. White-space is the only CSS property with a color in its name, so (for now!) it would be safe to just append a negative lookahead for the dash in white-space (?!-) to the regex, like so:

const colorWeb = new RegExp('\\(' + preparedRePart + '\\)(?!-)', 'g');

see https://regex101.com/r/niLgcc/1 for an example of the negative lookahead.

And yes, I'm aware I can turn off word highlighting. Just thought I'd let you know of the problem :)

Disable highlighting of "word" colours?

Hey there, lovely extension

I'd love to be able to disable the highlighting of colour "words": grey, green, etc. while still highlighting the hex-codes in Javascript. This is because in React Native, we set variables for each colour hex-code that often overlap with the "CSS" definition of a colour word!

Color(220,220,220)

Very nice extension, thank you...
I am using a language with the following syntax (or look at the topic name):

color(#,#,#)

Could you add the color keyword so that the number arguments are colored? Much like how rgb(#,#,#) works, but replace 'rgb' with 'color'. Each number argument ranges from 0 to 255.

Thank you!

Support Sass

Can you make it support colours defined in Sass?

Currently some arbitrary Sass variables get coloured in but don't get a rectangle in front of them oddly enough. I suppose there's no "official" support for Sass, so if it could be added, awesome.

dot highlight would be nice

similar to Atom:

All hsl colors have a white text color

All HSL colors have a white text color.

dot make selection and modification difficult

My prefered view is "dot". in fact i would love to have the square design like the native vscode one.

My issue is that when using the dot, it makes it very difficult to click and modify the entry. Mostly this is because when clicking on the dot it puts the cursor to the start of the line instead of to just before the dot.

I hope this can be fixed

Thanks

Update the Marketplace preview icon?

Hey, great extension! 👍

I noticed that the highlighting looks quite different (a lot better in my opinion) than in the preview image used on the marketplace. Looks like this changed in #3, and the image wasn't updated?

Anyway, thought I'd mention it since you might get more installs with a newer image. ;)

This color is unfriendly

This color is unfriendly

Why is the code for latest (v2.3.0) not in this repo?

The latest version in the vscode marketplace is v2.3.0. Is this being maintained somewhere else now?

does not highlight alpha ff, example #f92e8afe ok, #f92e8aff not

not a huge issue, ff alpha is unnecessary anyway so just delete ff, and works.

Option to add background pattern to see color that is equal to background

When the extenstion is displaying colors that are close or equal to the editor background color, you can not see them really well or at all.
I would suggest adding the option to add a background pattern, maybe a grayscale checkboard pattern.

Error: Document version already has changed

Hi,
In the console I always see: "Error: Document version already has changed"

What does it mean and how can I prevent it? (versions tested: 2.2.0, 2.3.0)

Thanks

Works with keyboard highlighted selections, but not mouse selected, for key macros

Regardless of highlight mechanism, using the alt-shift-P menu "Highlight Current" always works.

However, if I call the function highlightwords.addHighlight, it's not consistent.

I'm using some vim mappings to replicate my vim config:

    "vim.normalModeKeyBindingsNonRecursive": [
        {
            "before": ["<leader>", "m"],
            "commands": [
                "highlightwords.addHighlight"
            ]
        },
        {
            "before": ["<leader>", "M"],
            "commands": [
                "highlightwords.removeHighlight"
            ]
        },
        {
            "before": ["<leader>", "N"],
            "commands": [
                "highlightwords.removeAllHighlights"
            ]
        }
    ],

Using -m works only if I highlight using Shift-.

It does not work if I highlight using the mouse.

Does not work fully in diffing two files

For me it's not a high priority bug but I want to mention it. Thanks for this plugin!

Highlight Color Variables?

Can you add highlighting for SASS color variables? My SASS package in Atom had this and I miss it.

I will love you forever.

Possibly highlight entire color?

Right now the plugin only creates a colored bordered around the color in question -- is it possible for there an option to change the background (and foreground, if necessary) of the color string? Something like pigments: https://atom.io/packages/pigments ?

It may just be a combination of my font / theme / syntax, but it's hard to read the text surrounded by the border and would be less obtrusive if it just highlighted the entire block of text.

Shows colors where you don't need to

Shows colors everywhere it sees color names.

Maybe you should make a rule when the color name is inside another title don't show the color

Fails to load on new vscode

Since it doesn't support the new package.json Standard it fails to load on opening vscode.

EOENT: Error File not found: [..../package.json]

Plugin highlighting selectors names that share a color name

If I have a css class called 'blue', it becomes the blue color. highlighting should only apply to CSS properties, not selector names. See image.

sass variables with same x caracters, only first one is highlited

I hope this picture explains it all

Support Visual Studio .vssettings 0xABGR format

Visual Studio .vssettings file uses 0xABGR format. Can this format be supported also?

<Item Name="Plain Text" Foreground="0x00DCDADA" Background="0x002D2A24" BoldFont="No"/>

Ignore Alpha and set it to 1.0

```json { "activationTimes": { "startup": true, "codeLoadingTime": 55, "activateCallTime": 3, "activateResolvedTime": 0, "activationEvent": "*" } } ```

• Extension Name: color-highlight
• Extension Version: 2.3.0
• OS Version: Windows_NT x64 10.0.17134
• VSCode version: 1.28.0

We have written the needed data into your clipboard. Please paste:

Pattern match for hex values

Just a small addition, is it possible to match for hex values?

Highlights one extra symbol to the left

Highlights one extra symbol to the left, with either space or quote.

Color selector disappears

I must be missing something here, but when placing my mouse over a color, the color selector appears to the left, and then, upon moving my mouse to use it, the color selector disappears. Is there a keyboard shortcut or something to make edits inside the selector? Thanks.

Feature request: Add the highlight functionality to the color variables for sass and less

I like the extension.
I was wondering if possible the color variables to inherit the hex highlight, this would be very helpful for sass/less projects.