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

Question

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

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

Answer 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). Куда-нибудь между тегами <array></array> нашей цветовой схемы вставляем код:

  <!-- Общая подсветка фона элементов -->
        <dict>
            <key>name</key>
            <string>Default source</string>
            <key>scope</key>
            <string>text source, string.unquoted</string>
            <key>settings</key>
            <dict>
                <key>background</key>
                <string>#E07585E0</string>
            </dict>
        </dict>

  <!-- JS в html документах -->
        <dict>
            <key>name</key>
            <string>JS source</string>
            <key>scope</key>
            <string>source.js.embedded.html</string>
            <key>settings</key>
            <dict>
                <key>background</key>
                <string>#7A4A2299</string>
            </dict>
        </dict>

  <!-- CSS в html документах -->
        <dict>
            <key>name</key>
            <string>CSS source</string>
            <key>scope</key>
            <string>source.css.embedded.html, meta.attribute-with-value.style.html source.css</string>
            <key>settings</key>
            <dict>
                <key>background</key>
                <string>#804A7D99</string>
            </dict>
        </dict>

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

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

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

• В строках вроде <string>#804A7D99</string> #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 подсветка такая же, как у заключённого в тег <style></style>. Обратите внимание, что области видимости можно перечислять через запятую.

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

Answer 2

View -> Syntax -> HTML/CSS/JS

Answer 3

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