Назар Токар
Опубліковано: 1 Жовтня 2015
Оновлено: 25 Листопада 2015

Верстальщику часто необходимо видеть превью цветов, которые используются в макетах. В повседневной работе это также очень удобно. Ведь, если #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. Если что-то остаётся неясным, задвайте вопросы или посмотрите этот ролик (на английском):

← Тисни «Лайк», щоб читати нас у Фейсбуці
    Поширити у Фейсбуці
    Надіслати у Messenger
    Надіслати в Telegram
    Надіслати у WhatsApp
    Зберегти в Pocket

    Додати коментар

    Такий e-mail вже зареєстровано. Скористуйтеся формою входу або введіть інший.

    Ви вказали некоректні логін або пароль

    Вибачте, для коментування необхідно увійти.

    6 коментарів

    спочатку нові
    за рейтингом спочатку нові за хронологією

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

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

    Почему то не работает подсветка, может подскажете в чём дело?

    В настройки добавил

    {

    "ha_style": "filled"

    }

    Но цвет показало один раз, только непосредственно после добавления этой строки. После перезагрузки ST цвет не кажет, что только не делал.

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

    Автор
    Назар Токар

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

    С начало нужно установить Sublime Package Control

    На https://packagecontrol.io/installation" rel="nofollow">странице разработчика выберите вкладку с вашей версией редактора.

    Автор

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