Различные цвета JS и CSS в HTML-файлах, открытых редактором Sublime Text

#sublime_text

Как сделать так, чтобы, например, когда я открываю HTML-файл, в котором есть JS и,
например, CSS, сразу становилось бы видно, где JS, где СSS, где HTML. Например, под
HTML — стандартный (серый) бэкграунд, под JS — белый, а под СSS — зелёный. 

Думаю, суть объяснил. Помню, что была такая настройка — а сейчас она оооочень нужна,
— только не могу её найти. 
    

Ответы

Ответ 1

Сложное решение 

Создание собственного синтаксиса через YAML файлы, где даже чтобы подсветить отдельное
слово, потребуется немало действий и навыков.

Простое решение

Открываем файл своей активной цветовой схемы,  по умолчанию — Monokai. Если не знаете,
какая у вас установлена, Preferences → Color Scheme → Color Scheme Default (в выпадающем
меню могут быть и другие пункты, в случае, когда по переходу на Color Scheme Default
нигде нет галочки, ищем галочку по ним) → отмеченная галочкой и есть ваша схема. 

Установив плагин PackageResourceViewer, открываем файл схемы: Ctrl + Shift + P →
PackageResourseViewer:Open Resourse (благодаря fuzzy поиску можно набрать просто prvor)
→ Color Scheme Default (если ваша цветовая схема оказалась в другой папке, выберите
эту самую папку) → выбираем файл схемы с расширением .tmTheme .

Допустим, в HTML файлах мы хотим подсветить оранжевым JavaScript, фиолетовым CSS,
а в качестве общей подсветки, когда не заданы конкретные значения, выбрать насыщенный
розовый (в примере им подсвечено widget_id). Куда-нибудь между тегами 
нашей цветовой схемы вставляем код:

  
        
            name
            Default source
            scope
            text source, string.unquoted
            settings
            
                background
                #E07585E0
            
        

  
        
            name
            JS source
            scope
            source.js.embedded.html
            settings
            
                background
                #7A4A2299
            
        

  
        
            name
            CSS source
            scope
            source.css.embedded.html, meta.attribute-with-value.style.html
source.css
            settings
            
                background
                #804A7D99
            
        


Вероятно в файле вашей схемы уже присутствуют какие-то из областей видимости (см.
ниже) text source, string.unquoted, source.js.embedded.html, source.css.embedded.html,
meta.attribute-with-value.style.html, source.css. Тогда смените цвет, принимаемый соответствующими
областями видимости, на указанный в коде между тегами , идущими в
следующей за background строке. Формат — ARGB.

Результат. Обратите внимание на мини-карту, стало удобнее ориентироваться.



Разберём синтаксис:


В строках вроде #804A7D99 #804A7D99 — цвет. Если вас не устроили
предложенные мной, впишите те, которые вам придутся по душе.
background — фон. Если вместо background мы пропишем foreground, изменится цвет самого
текста, а не бэкграунда вокруг него.


Представленные далее параметры называются «scopes» (я перевёл как «области видимости»,
за точность перевода не ручаюсь):

<-- string.unquoted — поле объекта строки без кавычек в javascript, можете удалить
из кода. Привёл его для примера, чтобы наглядно видели розовую подсветку на скриншоте. -->


text source — общий хайлайт, когда не заданы конкретные значения.
source.js.embedded.html и source.css.embedded.html — JavaScript и CSS соответственно
в HTML документах.  Файлы с расширениями .js и .css останутся без подсветки, при желании
обратного вместо source.js.embedded.html и source.css.embedded.html вписать source.js
и source.css. Ну и если вдруг потребуется хайлайт HTML, область видимости HTML — text.html .
meta.attribute-with-value.style.html source.css — встроенные стили CSS, подсвечиваться
будет фон значения атрибута .style . source.css после пробела означает, что у инлайнового
CSS подсветка такая же, как у заключённого в тег .  Обратите внимание,
что области видимости можно перечислять через запятую.




Спасибо за внимание.


Ответ 2

View -> Syntax -> HTML/CSS/JS


Ответ 3

Заходишь в Preferences -> Color Scheme и выбираешь нужную схему, например Dawn.