Верстальнику часто необхідно бачити прев’ю кольорів, які використовуються в макетах. В повсякденній роботі це також дуже зручно. Адже, якщо #fff або #2d2d2d ми добре знаємо, то одразу сказати, що #9fd745 — це світло-зелений, я не зміг би.

Для цього використовуються плагіни підсвічування кольорів. Про один з них я розповім, це Color Highlighter.

Плагін підсвічує всі варіації кольорів, які зустрічаються в коді: HEX, RGB, RGBA і кольору по іменах (green, red):

sublime text подсветка цветов

Раніше я писав про GutterColor, який також підсвічує кольору в Sublime Text 3, але працює по-іншому.

Якщо ви не встановили Package Control, тоді саме час це зробити. Заходьте на сайт аддона і вибирайте вашу версію. Встановіть PC як показано в інструкції.

Далі встановіть плагін через Package Control, як це показано тут:

  • ctrl/cmd+shft+p, виберіть Package Control: Install Package
  • введіть Color Highlighter і підтвердіть встановлення

Далі перезапустіть програму.

Після цього відкрийте Preferences → Package Settings → Color Highlighter → Settings – User і додайте туди налаштування, яке буде показувати прев’ю кольору на тлі. Варіант outlined буде додавати підкреслення певним кольором.

{
"ha_style": "filled"
}

Важливо: лапки повинні бути подвійними.

Варіанти змінної можуть бути такими:

  • filled (заливка),
  • outlined (обводка),
  • none,
  • underlined (підкреслення),
  • colored text (колір текста).

Як бачите, нічого складного. Плагін працює однаково на Win і на Mac. Якщо щось залишається неясним, задавайте питання або подивіться цей ролик (англійською):

Коменти

Андрій

Нажаль не працює. Встановив сьогодні – 24 лютого 2021 р.

Анон

Никак не могу найти, как убрать границу. При выбранном стиле filled заливается фон текста, но при этом сам текст еще и получает outline контрастного цвета, что очень – ну очень – режет глаза. Хотел убрать эту границу или хотя бы изменить ее цвет на прозрачный, потому что смотреть на этот вырвиглаз просто невозможно. Придется другие плагосы искать или тупо использовать осевую пипетку и забить на точное отображение цвета.

Кстати говоря, прикинуть, что упомянутый цвет – светло-зеленый, можно и без плагина. #9fd745 – это R=9f, G=d7, B=45; зеленый преобладает – значит, будет зеленый оттенок; зеленый в диапазоне 00-ff довольно светлый, значит, светло-зеленый; а степень удаленности красного и синего от зеленого указывает на степень насыщенности зеленого. С непривычки будете думать чуть дольше, но потом – когда привыкнете – подобные плагины будут вам нужны только для наглядности. И писать цвета сами сходу будете. Правда, для наиболее точных цветов все равно будет требоваться пипетка. Ваш кэп.

Dima

Почему то не работает подсветка, может подскажете в чём дело?
В настройки добавил
{
“ha_style”: “filled”
}
Но цвет показало один раз, только непосредственно после добавления этой строки. После перезагрузки ST цвет не кажет, что только не делал.

ну не работает

куда вставлять эту строку
“ha_style”: “filled”

В начале в конце да где, если пилишь гайд будь добор описать так чтобы было всем понятно!

Gulp guy

Эта штука, кстати, поддерживает переменные less, даже те, которые импортируются из другого файла. Правда не уверен что взетит без соответствующего установленного less синтаксиса.

Назар Токарь

Тобто він показує значення змінних, які зберігаються в інших файлах проекту? Цікаво.

Александр

С начало нужно установить Sublime Package Control
На странице разработчика выберите вкладку с вашей версией редактора.

Назар Токарь

@Александр, без него же вообще ничего не поставишь, я забыл совсем о нем. Спасибо, обновлю статью.