DimaShved
@DimaShved
Web designer

Как добавить в Sublime Text 3, HTML документа свой цвет определенному элементу?

Привет народ!
Есть простая, маленькая, но полезная настройка. А именно?
Собираю проекты с помощью Gulp.js, как многие знают есть такой модуль как gulp-rigger - который нам даёт возможность вставлять шаблоны (инклюды) в HTML и не только, для тех кто не знал, с помощью вот такой конструкции //= template/header.html.

Сам вопрос.

Как задать цвет такой конструкции для HTML и JS документа?

Есть идея.
1. Нужно открыть HTML документ
2. Заходим
Preferences > Settings - More > Syntax Specific - User
(Тоесть создаем свой синтаксис). Так как мы открыли HTML документ, то пользовательские настройки будут создаваться именно для HTML синтаксиса.

Далее нужно как то кастомизировать и изменить цвет //= template/header.html
  • Вопрос задан
  • 988 просмотров
Решения вопроса 2
К сожалению, файлы с расширением .sublime-syntax могут обновляться с выходом новых билдов Sublime Text → соответственно, Ваши изменения окажутся утерянными → придётся заново туда вставлять строки. Вариант: настроить какую-нибудь SVN → клонировать папки с Вашими изменениями → после обновлений, например, в Git ввести команду git pull, которая сольёт изменения. Но это лишние движения: так, чтобы внёс изменения один раз и забыть — я не знаю, как сделать. Можно скопировать содержимое файлов в отдельные пользовательские файлы, которые затем настраиваете на использование в качестве синтаксисов для своих языков разметки/программирования, но тогда не будут получаться обновления, что ещё хуже. Поэтому лучше всего, полагаю, писать разработчикам синтаксисов, они вполне реально могут прислушаться.



Пример, если Ваш шаблон будет подсвечиваться в HTML-файле. Порядок действий, когда он начнёт подсвечиваться в JavaScript-файле аналогичный, далее по тексту вместо sashaphenomenal.html вставляте sashaphenomenal.js, а text.html.basic замените на source.js. Надеюсь, разберётесь самостоятельно.

Для начала рекомендую установить плагин Local History, дабы не пришлось прибегать к переустановке Sublime Text, если что-то поломается в дефолтных настройках синтаксисов.

Потребуется установка плагина PackageResourceViewer. После неё Ctrl+Shift+PPackageResourceViewer: Open Resource (пользуясь fuzzy-поиском достаточно написать prv) → HTMLHTML.sublime-syntax . В открывшемся файле где-нибудь (я вставил между строками pop: true и - match: (</?)((?i:body|head|html)\b) ) копипастите следующие 2 строки и сохраняете файл:

- match: //= template/header.html
  scope: sashaphenomenal.html

После match: Ваш шаблон, после scope: — заданная область видимости.

Далее открываем файл активной цветовой схемы с расширением tmTheme. Если не знаете, как — см. тут в первых двух абзацах после Простое решение. В файле темы где-нибудь между тегами <array></array> вставляете следующий код:

<dict>
	<key>name</key>
	<string>HTML: Sasha Phenomenal</string>
	<key>scope</key>
	<string> text.html.basic sashaphenomenal.html </string>
	<key>settings</key>
	<dict>
		<key>background</key>
		<string>#E07585E0</string>
	</dict>
</dict>

Что содержится между тегами <string></string>, по порядку:
  1. HTML: Sasha Phenomenal — произвольное имя настройки для удобства дальнейшего поиска в файле схемы или на tmTheme Editor.
  2. text.html.basic — область видимости для HTML-файлов, sashaphenomenal.html — scope, которую мы прописали при предыдущей вставке.
  3. #E07585E0 — цвет, я выбрал формат ARGB. Лучше задавать цвет в ARGB или HEX HEX, а не X11 colors, поскольку в Sublime Text 3 могут некорректно отображаться как минимум цвета aqua, fuchsia и lime.

Сохраняем файл → открываем произвольный HTML-документ → вставляем в него //= template/header.html → Ваш темплейт должен подсвечиваться вот так:

1bxJljd.png
Возможно, придётся подождать несколько минут, пока изменения вступят в силу. Иногда помогает перезагрузка файлов или Sublime Text 3.

Если шаблону необходима не подсветка, а определённый цвет текста или желаете сделать его жирным/наклонным, опять же тут написано, какие ключи требуется задавать, (найдите по ссылке, где Золотой текст, Зелёный фон, Наклонный коралловый текст).

Если считаете, что подсветка этого шаблона будет полезна не только для Вас, откройте здесь New Issue и предложите свою идею разработчикам. У Sublime Text 3 хорошее сообщество, они прислушиваются ко всему конструктивному.

Спасибо.
Ответ написан
DimaShved
@DimaShved Автор вопроса
Web designer
Вот что получилось!

8b862dca99504b4c87f14fa2be1202a0.png
Немного дополню ответ Александра. В моем случае нужно чтобы все подсвечивалось после //=, так как путь к шаблону может быть любой.

Решил так, взял пример с комментирования. И переделал под свои нужды. В итоге открывающий тег получился //=, а закрывающийся .html. Прошу заметить, закрывающегося тега нет, так как gulp-rigger не сможет распознать нашу строку, но так как все шаблоны заканчиваются на .html, то пусть он и будет являться закрывающим. В итоге чтобы я не написал межды тегами //= и .html будет подсвечиваться.

Как это выглядит в "HTML.sublime-syntax"
Вставил после main у меня это 15 строка, с соблюдением отступов.
- match: //=
      scope: rigger.html
      push:
        - meta_scope: rigger.html
        - match: '.html'
          pop: true


Так как у меня установлена тема Piatto Dark то и файл я переделыва из этой темы.

Как это выглядит в "Piato Dark.tmTheme"
Вставил сразу после <array>
<dict>
			<key>name</key>
			<string>HTML: Rigger</string>
			<key>scope</key>
			<string> text.html.basic rigger.html </string>
			<key>settings</key>
			<dict>
					<key>foreground</key>
					<string>#b39624</string>
			</dict>
</dict>

Еще раз большое спасибо Александру, надеюсь кому нибудь пригодится. Мелочь, а приятно :)
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы