How to add a color to a certain element in Sublime Text 3, HTML document?

Question

HTML

Hi people!
There is a simple, small, but useful setting. Namely?
I collect projects using Gulp.js, as many people know, there is such a module as gulp-rigger- which gives us the opportunity to insert templates (includes) into HTML and not only, for those who did not know, using this design //= template/header.html.

The question itself.
How to set the color of such construction for HTML and JS document?
I have an idea.
1. You need to open an HTML document
2. We go

Preferences > Settings - More > Syntax Specific - User

(That is, we create our own syntax). Since we have opened an HTML document, the user settings will be created specifically for the HTML syntax.
Next, you need to somehow customize and change the color//= template/header.html

Answer 1

Unfortunately, files with the .sublime-syntax extension can be updated with the release of new builds of Sublime Text → accordingly, your changes will be lost → you will have to re-insert lines there. Option: set up some SVN → clone folders with your changes → after updates, for example, in Git, enter the git pull command , which will merge the changes. But these are unnecessary movements: so that I make changes once and forget - I don’t know how to do it. It is possible to copy the contents of the files into separate user files, which you then set up to use as syntaxes for your markup/programming languages, but then you will not receive updates, which is even worse. Therefore, it is best, I believe, to write to the syntax developers, they can really listen.
An example if your template will be highlighted in an HTML file. The procedure for when it starts to be highlighted in the JavaScript file is similar, then in the text, instead of sashaphenomenal.html , insert sashaphenomenal.js , and replace text.html.basic with source.js . I hope you figure it out on your own.
To begin with, I recommend installing the Local History plugin so that you don’t have to resort to reinstalling Sublime Text if something breaks in the default syntax settings. You will need to install the PackageResourceViewer
plugin . After it Ctrl+Shift+P →PackageResourceViewer: Open Resource (using fuzzy search just type prv ) → HTML → HTML.sublime-syntax . In the opened file somewhere (I inserted between the lines pop: trueand - match: (</?)((?i:body|head|html)\b)) copy-paste the following 2 lines and save the file:

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

After match: Your template, after scope: - the given scope .
Next, open the active color scheme file with the tmTheme extension . If you don’t know how, see here in the first two paragraphs after Easy solution . In your theme file, somewhere between the tags, <array></array>paste the following code:

<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>

What is contained between the tags <string></string>, in order:
Save the file → open an arbitrary HTML document → paste //= template/header.html into it → Your template should be highlighted like this: You
may have to wait a few minutes for the changes to take effect. Sometimes reloading files or Sublime Text 3 helps.
If the template does not need highlighting, but a certain text color or you want to make it bold / italic, again it says what keys you need to set (find the link where Gold text , Green background , Oblique coral text) .
If you think that highlighting this template will be useful not only for you, open a New Issue hereand submit your idea to the developers. Sublime Text 3 has a good community, they listen to everything constructive.
Thank you.