Изменить / добавить подсветку синтаксиса для языка в Sublime 2/3

94

Я хочу изменить / добавить подсветку синтаксиса для языка в Sublime 2/3.

Например, я хочу, чтобы ключевое слово было thisокрашено в JavaScript.

Как я могу это сделать?

Я знаю, что есть файл предпочтений JavaScript C:\Program Files\Sublime Text 3\Packages, но я не знаю, что изменить, и нужно ли мне создать новый файл предпочтений JavaScript где-нибудь в этой папке %APPDATA%\Sublime Text 3.

syntax-highlighting sublimetext3 Никлас
источник

Ответы:

95

Подсветка синтаксиса контролируется используемой вами темой, доступной через Preferences -> Color Scheme. Темы выделяют различные ключевые слова, функции, переменные и т. Д. За счет использования областей, которые определяются серией регулярных выражений, содержащихся в .tmLanguageфайле в каталоге / пакете языка. Например, JavaScript.tmLanguageфайл назначает области source.jsи variable.language.jsк thisключевому слову. Поскольку Sublime Text 3 использует .sublime-packageформат файла zip для хранения всех настроек по умолчанию, редактировать отдельные файлы не так просто.

К сожалению, не все темы содержат все области видимости, поэтому вам придется поэкспериментировать с разными, чтобы найти ту, которая хорошо выглядит и дает вам желаемое. В Sublime Text входит ряд тем, и многие другие доступны через Package Control , которые я настоятельно рекомендую установить, если вы еще этого не сделали. Убедитесь, что вы следуете указаниям ST3 .

Так получилось, что я разработал Neon Color Schemeпакет, доступный через Package Control, на который вы, возможно, захотите взглянуть. Моя главная цель, помимо попытки сделать широкий спектр языков как можно лучше, заключалась в том, чтобы определить как можно больше различных областей - гораздо больше, чем включено в стандартные темы. Хотя определение языка JavaScript не так тщательно, как, например, Python, Neonвсе же гораздо больше разнообразия, чем некоторые значения по умолчанию, такие как Monokaiили Solarized.

jQuery выделен неоновой темой

Я должен отметить, что я использовал Better JavaScriptопределение языка @ int3h для этого изображения вместо того, которое поставляется с Sublime. Его можно установить через Package Control.

ОБНОВИТЬ

Недавно я обнаружил другое определение языка замены JavaScript - JavaScriptNext - ES6 Syntax. У него больше возможностей, чем у базового JavaScript или даже лучшего JavaScript. В том же коде это выглядит так:

JavaScriptСледующий

Кроме того, поскольку я изначально написал этот ответ, @skuroda был выпущен PackageResourceViewerчерез Package Control. Это позволяет вам легко просматривать, редактировать и / или извлекать части или целые .sublime-packageпакеты. Итак, если вы выберете, вы можете напрямую редактировать цветовые схемы, включенные в Sublime.

ЕЩЕ ОДИН ОБНОВЛЕНИЕ

С выпуском почти всех пакетов по умолчанию на Github изменения происходят быстро и яростно. Старый синтаксис JS был полностью переписан, чтобы включить в него лучшие части синтаксиса JavaScript Next ES6, и теперь он настолько полностью совместим с ES6, насколько это возможно. Тонн других изменений были сделаны крышки угловых и краевых случаев, улучшить консистенцию, и только в целом сделать его лучше. Новый синтаксис был включен в (на данный момент) последнюю сборку разработки 3111.

Если вы хотите использовать любой из новых синтаксисов с текущей бета-сборкой 3103, просто клонируйте репозиторий Github где-нибудь и свяжите JavaScript(или любой другой язык (и), который вы хотите) в свой Packagesкаталог - найдите его в своей системе, выбрав Preferences -> Browse Packages.... Затем просто git pullвремя от времени выполняйте a в исходном каталоге репо, чтобы обновлять любые изменения, и вы сможете наслаждаться последними и лучшими! Я должен отметить, что репо использует новый .sublime-syntaxформат вместо старого .tmLanguage, поэтому они не будут работать со сборками ST3 до 3084 или с ST2 (в обоих случаях вам все равно следовало обновиться до последней бета-версии или сборки для разработчиков).

В настоящее время я настраиваю свою Neon Color Scheme для обработки всех новых областей в новом синтаксисе JS, но большинство из них уже должно быть охвачено.

MattDMo
источник
Я установил Package Control и ваш Better JavaScript. Как мне настроить схему на вашу? Его нет в списке «Цветовая схема».
Niklas
Вы также установили "Neon Theme" через Package Control? Когда у вас есть, перейдите Preferences -> Color Scheme -> Neon Themeи выберите Neon.
MattDMo
1
Если вы устанавливаете пакеты через Package Control, в этом случае они автоматически сохраняются в нужном месте %APPDATA%\Sublime Text 3\Installed Packages\Neon Theme.sublime-package. Выбор пункта меню выше также автоматически обновит ваш Packages\User\Preferences.sublime-settingsфайл.
MattDMo
@MattDMo - вау, это было очень тщательно. Я просто пытаюсь сделать цвет синтаксиса и усиление редактирования для XML-подобной разметки. Но у меня возникли проблемы с тем, чтобы понять, как начать с чего-то очень простого. Где я мог бы начать обратный инжиниринг или, что еще лучше, получить руководство по его созданию.
Тимоти Т.
1
@ nmz787, если вам нужен только .sublime-syntaxфайл, просто скачайте его и скопируйте в ~/.config/sublime-text-3/Packages/User. Затем он будет доступен в меню синтаксиса в самом нижнем правом углу окна Sublime либо отдельно (он будет говорить «SystemVerilog»), либо в Userподменю, в зависимости от ваших настроек. Если вам нужен весь пакет, убедитесь, что Package Control был установлен правильно, откройте палитру команд, введите pci , нажмите Enter, найдите SystemVerilogи нажмите Enter. Вам не нужно переименовывать какие-либо файлы или что-то еще - зачем вы это делаете?
MattDMo
31

Наконец-то я нашел способ настроить данные темы.

Перейти C:\Program Files\Sublime Text 3\Packagesи скопировать + переименовать Color Scheme - Default.sublime-packageв Color Scheme - Default.zip. Затем разархивируйте его и скопируйте тему, на которую хотите изменить %APPDATA%\Sublime Text 3\Packages\User. (В моем случае All Hallow's Eve.tmTheme).

Затем вы можете открыть его в любом текстовом редакторе и что-то изменить / добавить, например, для изменения thisв JavaScript:

<dict>
    <key>name</key>
    <string>Lang Variable</string>
    <key>scope</key>
    <string>variable.language</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#FF0000</string>
    </dict>
</dict>

Это будет отмечено thisв файлах JavaScript красным. Вы можете выбрать свою тему в разделе Preferences -> Color Scheme -> User -> <Your Name>.

Никлас
источник
1
да, это неуклюжий .sublime-package
обходной путь, к которому
9
Этот плагин находится здесь - он называется PackageResourceViewerи может быть установлен через Package Control. Это значительно упрощает работу с .sublime-packageфайлами Sublime Text 3 , и я настоятельно рекомендую его, если вы планируете вносить какие-либо изменения в ST3.
MattDMo
1
Где вы нашли ссылку на эти правила?
qodeninja
2
^ Что они сказали. Также я не понимаю, когда / где вы «выбираете» ключевое слово «this» в коде, почему это окрашивает только ключевое слово «this». Не могли бы вы объяснить это?
Zelphir Kaltstahl
1
вот документация по грамматикам языка Text Mate и Sublime Text для определений синтаксиса
yaitloutou,
16

Используйте плагин PackageResourceViewer, установленный через Package Control (как упоминалось MattDMo ). Это позволяет вам переопределить сжатые ресурсы, просто открыв их в Sublime Text и сохранив файл. Он автоматически сохраняет только отредактированные ресурсы в% APPDATA% / Roaming / Sublime Text 3 / Packages / или ~ / .config / sublime-text-3 / Packages /.

В зависимости от операции, после установки плагина выполните PackageResourceViewer: Open Resourceкоманду. Затем выберите, JavaScriptа затем JavaScript.tmLanguage. В редакторе откроется файл xml. Вы можете отредактировать любое определение языка и сохранить файл. Это запишет замещающую копию файла JavaScript.tmLanguage в каталог пользователя.

Тот же метод можно использовать для редактирования определения любого языка в системе.

Chawkinsuf
источник
Я ничего не вижу в цветах. Однако ваш ответ был наиболее близок к тому, что мне было нужно. Вместо этого я отредактировал Monokai.tmTheme в соответствии с этим сообщением на форуме SublimeText , чтобы заставить работать подсветку синтаксиса JSON.
jmort253
1
Конкретные инструкции в этом ответе были для редактирования определения языка. Хотя это не позволит вам напрямую редактировать цвета цветовой схемы, это позволит вам изменить способ обнаружения определенных типов областей и, следовательно, то, как цветовая схема интерпретирует (и раскрашивает) язык. Плагин откроет любой тип ресурса в Sublime, поэтому вы можете точно так же редактировать цветовые схемы напрямую с помощью того же инструмента. Например, мне нравится цветовая схема Tomorrow Night, поэтому я открывал Tomorrow-Night.tmTheme с помощью этого плагина, чтобы редактировать эту цветовую схему.
chawkinsuf
5

«Это» уже окрашено в Javascript.

Просмотр-> Синтаксис-> и выберите язык, который нужно выделить.

Эпирокс
источник
Как раз то, что я искал: View -> Syntax -> Open all with current extension as...установить, например, *.stanфайлы с раскраской синтаксиса C ++.
BoltzmannBrain
0

Это мой рецепт

Примечание: это не совсем то, о чем спрашивает OP. Эти инструкции помогут вам изменить цвета элементов (комментариев, ключевых слов и т. Д.), Которые определены правилами сопоставления синтаксиса. Например, используйте эти инструкции, чтобы изменить так, чтобы все комментарии кода были окрашены в синий цвет вместо зеленого.

Я считаю, что OP спрашивает, как определить thisкак элемент, который нужно раскрасить, когда он находится в исходном файле JavaScript.

  1. Установить пакет: PackageResourceViewer

  2. Ctrl+Shift+P> [ PackageResourceViewer: Open Resource]> [ Color Scheme - Default]> [ Marina.sublime-color-scheme] (или какую бы цветовую схему вы ни использовали)

  3. Приведенная выше команда откроет новую вкладку для файла " Marina.sublime-color-scheme".

    • Для меня этот файл находился в моем перемещаемом профиле %appdata%( C:\Users\walter\AppData\Roaming\Sublime Text 3\Packages\Color Scheme - Default\).
    • Однако, если я перейду к этому пути в проводнике Windows , [ Color Scheme - Default] не принадлежит дочернему каталогу [ Packages] каталога. Подозреваю, что PackageResourceViewerзанимается какой-то виртуализацией.

необязательный шаг: На новой вкладке цветовой схемы: Ctrl+Shift+P> [ Set Syntax: JSON]

  1. Найдите правило, которое хотите изменить. Я хотел, чтобы комментарии были видны, поэтому я искал " Comment"

    • Нашла в "rules"разделе
 "rules":
    [
        {
            "name": "Comment",
            "scope": "comment, punctuation.definition.comment",
            "foreground": "var(blue6)"
        },

  1. Найдите строку, "blue6":чтобы найти раздел определений переменных цвета. Нашел в "variables"разделе.

  2. Выберите новый цвет с помощью такого инструмента, как http://hslpicker.com/ .

  3. Либо определите новую цветовую переменную, либо перезапишите настройку цвета для blue6.

    • Предупреждение: перезапись blue6повлияет на все другие текстовые элементы в этой цветовой схеме, которые также используют blue6 («Пунктуация» «Аксессуар»).

  4. Сохраните свой файл, изменения будут немедленно применены ко всем открытым файлам / вкладкам.

ПРИМЕЧАНИЯ

Sublime справится с любым из этих цветовых стилей. Возможно больше.

hsla = оттенок, насыщенность, яркость, альфа rgba = красный, зеленый, синий, альфа

hsla (151, 100%, 41%, 1) - последний параметр - это альфа-уровень (прозрачность) 1 = непрозрачный, 0,5 = полупрозрачный, 0 = полностью прозрачный

hsl (151, 100%, 41%) - без альфа-канала

rgba (0, 209, 108, 1) - RGB с альфа-каналом

rgb (0, 209, 108) - без альфа-канала

Вальтер Стабош
источник