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

    Отправить ответ

    5 Комментарий на "Подсветка цветов в Sublime Text при помощи Color Highlighter"

    Уведомлять
    avatar
    5000
    Dima
    Гость

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

    Gulp guy
    Гость

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

    Александр
    Гость

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

    wpDiscuz