ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

Color Highlighter

by Monnoroch ST2/ST3 Top 25

ColorHighlighter - is a plugin for the Sublime text 2 and 3, which underlays selected hexadecimal colorcodes (like "#FFFFFF", "rgb(255,255,255)", "white", etc.) with their real color. Also, plugin adds color picker to easily modify colors. Documentation: https://monnoroch.github.io/ColorHighlighter.

Details

Installs

  • Total 747K
  • Win 459K
  • OS X 177K
  • Linux 111K
Jun 21 Jun 20 Jun 19 Jun 18 Jun 17 Jun 16 Jun 15 Jun 14 Jun 13 Jun 12 Jun 11 Jun 10 Jun 9 Jun 8 Jun 7 Jun 6 Jun 5 Jun 4 Jun 3 Jun 2 Jun 1 May 31 May 30 May 29 May 28 May 27 May 26 May 25 May 24 May 23 May 22 May 21 May 20 May 19 May 18 May 17 May 16 May 15 May 14 May 13 May 12 May 11 May 10 May 9 May 8 May 7
Windows 505 470 527 461 344 404 544 616 545 584 514 382 375 520 272 632 557 592 417 430 612 555 551 548 568 414 426 514 536 659 569 583 418 472 571 721 666 620 680 422 431 597 677 660 682 477
OS X 97 116 141 133 60 81 105 163 170 151 127 73 94 129 78 148 162 140 73 81 133 132 110 129 104 85 81 124 145 146 145 139 94 109 136 154 173 156 191 89 107 141 171 176 215 129
Linux 62 82 101 116 64 78 102 98 84 86 85 64 86 86 61 89 90 124 76 63 89 100 97 73 89 88 69 106 126 117 100 104 71 81 110 100 117 150 125 84 83 104 125 107 137 139

Readme

Source
raw.​githubusercontent.​com

ColorHighlighter

Donate Package Control Downloads

ColorHighlighter is a plugin for the Sublime Text 2 and 3, which unobtrusively previews color values by underlaying the selected hex codes in different styles, coloring text or gutter icons. Also, plugin adds color picker, color format converter to easily modify colors.

Description

Description

Description

Description

Installation

  • Recommended - Using Sublime Package Control
    • Ctrl+Shift+P then select Package Control: Install Package
    • install Color Highlighter
  • Alternatively, download the package from GitHub into your Packages folder.
  • For gutter icons install ImageMagick. To configure ImageMagick, update icon_factory.convert_command plugin setting to the path of the convert utility on your machine, hint: use the which convert command on *nix machines.

Color Highlighting styles

There are three color highlighting styles: inline highlighting, underline blocks, and gutter icons.

Gutter icons

To enable highlighting colors with gutter icons go to Tools > Color Highlighter > Color Highlighters > Highlight colors in all text > Gutter icon style and select Circle or Square. Highlighting colors with gutter icons requires ImageMagick to be installed (see the installation section). Going to Tools > Color Highlighter > Color Highlighters > Highlight colors in all text > Gutter icon style and selecting None will disable it.

This mode can cause pauses when opening big files for the first time with “highlight everything” mode because the plugin needs to create icons for all newly encountered colors.

Blocks

Highlighting colors with blocks will display colored blocks right near highlighted colors. These blocks cause text reflow. To enable highlighting colors with underline blocks go to Tools > Color Highlighter > Color Highlighters > Highlight colors in all text > Highlight colors with blocks and choose one of To the right of the color, To the left of the color, Below the color. These are options are self-explanatory.

For Below the color the block will be the same size that the color code is. For To the right of the color and To the left of the color the block size can be configured with the length parameter which defines the size of the block in characters.

Going to Tools > Color Highlighter > Color Highlighters > Highlight colors in all text > Highlight colors with blocks and selecting None will disable it.

Inline highlighting

Inline color highlighting itself has several styles. All of them require Color Scheme modification, so when this mode is enabled the view's color scheme is changed to a fake one, which is a copy of the real color scheme, but augmented with the plugin-specific definitions. To disable inline highlighting go to Tools > Color Highlighter > Color Highlighters > Highlight colors in all text > Inline highlighting style and select None.

Inline blocks

Highlighting colors with inline blocks will display colored blocks right on top of highlighted colors. To enable highlighting colors with inline blocks go to Tools > Color Highlighter > Color Highlighters > Highlight colors in all text > Inline highlighting style and select Filled.

Colored text

Highlighting colors with colored text will make colors text be rendered with that color. To enable highlighting colors with colored text go to Tools > Color Highlighter > Color Highlighters > Highlight colors in all text > Inline highlighting style and select Text.

Outline and underline styles

If one wants color highlighting to be more subtle that one with inline blocks he can select one of Outlined, Underlined solid, Underlined strippled, Underlined squiggly styles in Tools > Color Highlighter > Color Highlighters > Highlight colors in all text > Inline highlighting style menu.

Color Highlighting modes

Highlight everything

In this mode the plugin parses the whole file and highlights all colors it can find. Highlighting style settings for that mode are in Tools > Color Highlighter > Color Highlighters > Highlight colors in all text.

This mode can cause pauses when opening big files because the plugin needs to parse the whole file.

Highlight selection

In this mode the plugin highlights colors under the cursor. It supports multiple selections as well. Highlighting style settings for that mode are in Tools > Color Highlighter > Color Highlighters > Highlight colors in selected text.

Highlight when hovering

In this mode the plugin highlights colors when one hovers over them with the mouse cursor. Highlighting style settings for that mode are in Tools > Color Highlighter > Color Highlighters > Highlight colors when hovering the cursor above them.

Combined

These three modes can be combined in any possible way. The settings for all three modes are completely independent and can be configured all at once. For example, the default settings are to highlight all colors with gutter icons and with colored text, highlight selected colors with blocks to the right of the color and highlight colors one hovers over with inline blocks.

Color picker

Just put the cursor (or multiple cursors) where you want the color and and select “Insert color with color picker” in context menu (or press Ctrl+Shift+C). Select the color in a popup color picker and it will be inserted in place of all your cursors. If some of your cursors are in existing colors, these colors will be replaces with a newly selected one.

Color converter

Just put the cursor (or multiple cursors) on the color code and select “Convert color to the next format” in context menu (or press Ctrl+Shift+,) or “Convert color to the previous format” in context menu (or press Ctrl+Shift+.). This will convert colors under cursors between different supported color formats.

Variables highlighting

THIS FEATURE CURRENTLY DOESN'T WORK.

It was removed because it didn't work very well, was slow and buggy. Right now I'm in the process of searching for ways to implement it nicely, but it's not ready yet. I also plan to include color functions and native CSS variables into the release of this feature. Please be patient.

FAQ

My plugin settings are gone!

The settings file in the 8.0 has a completely different structure and way more features to configure. Because of it it's incompatible with the old one. To eliminate weird migration bugs I've decided to delete user settings file upon migration to the new version. The settings are only deleted this once, so you can reconfigure the plugin again after update and the settings won't disappear again.

The plugin doesn't work in HTML/JS/VUE/OTHER files

Yes, it does. Highlighting colors is just disabled by default in all files but stylesheets. To enable highlighting colors in files with any extension you need to modify file_extensions setting and add the required extension there. You can also put "all" there and the plugin will be enabled for all files. If you have enabled some extensions before, they need to be reenabled due to the previous section.

Inline color highlighting works incorrectly

Inline color highlighting is not guaranteed to be compatible with any plugin that generates or changes color schemes, such as SublimeLinter. If you use one of those plugins you have to either disable them completely, or configure them to not modify the color scheme or configure Color Highlighter to not modify the color scheme, which basically means disabling inline color highlighting.

I don't have any other plugin that modifies the color scheme and inline highlighting still works incorrectly

Due to a Sublime Text not ordering added regions deterministically enabling both text and non-text inline highlighting at the same time might work properly. For example, if you select Text in Tools > Color Highlighter > Color Highlighters > Highlight colors in all text > Inline highlighting style and Filled in Tools > Color Highlighter > Color Highlighters > Highlight colors in selected text > Inline highlighting style it might not work all the time. If you close/open the file a few times and sometimes it's working fine and sometimes it isn't, this is exactly this issue.

Donate

Thank you guys for all your support, I couldn't have done it without your contributions. Every little bit helps!

paypal