Different highlight JS and CSS in Sublime Text 3

Question

I know how to change color of highlight of javascript and CSS. I add to my active tm.Theme file between <array></array> this strings:

    <dict>

    <key>name</key>

    <string>Embedded source</string>

    <key>scope</key>

    <string>text source, string.unquoted</string>

    <key>settings</key>

    <dict>

    <key>background</key>

    <string>#804A7D99</string>

    </dict>

    </dict>

Result:

Violet background

But how to make backgrounds of JS and CSS various that it was more convenient to be guided on minimap? For example:

JS — blue

Blue background

CSS — green

Green background

Thanks.

I've noticed you have been looking into color schemes a lot over the last few days. Are you working on a release or just your personal setup? — Enteleform
– Enteleform, Commented Apr 21, 2016 at 8:51
Also - please provide Gist or PasteBin code samples with your questions to make testing solutions easier for potential answerers. — Enteleform
– Enteleform, Commented Apr 21, 2016 at 8:53

Community · Accepted Answer · 2017-05-23 12:31:13Z

2

Include the following code in your tmTheme file to handle mixed JS, CSS, & 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>#2D6A73</string>
            <key>foreground</key>
            <string>#7B91B9</string>
        </dict>
    </dict>

    <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>#2D7333</string>
            <key>foreground</key>
            <string>#7B91B9</string>
        </dict>
    </dict>

    <dict>
        <key>name</key>
        <string>HTML_Text</string>
        <key>scope</key>
        <string>text.html</string>
        <key>settings</key>
        <dict>
            <key>background</key>
            <string>#783727</string>
            <key>foreground</key>
            <string>#7B91B9</string>
        </dict>
    </dict>

As mentioned by @KeithHall in the comments, the use of the scopes:

CSS:   source.css.embedded.html, meta.attribute-with-value.style.html source.css
JS:    source.js.embedded.html

will allow you to apply these custom background colors to the HTML syntax without affecting the CSS & JS syntaxes.

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Apr 21, 2016 at 8:32

Enteleform

3,8531 gold badge18 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Keith Hall Over a year ago

note that this will also affect the background color of standalone css and js files - you could use the source.css.embedded.html, meta.attribute-with-value.style.html source.css scope to only affect css embedded in html and source.js.embedded.html to only affect js embedded in html

Enteleform Over a year ago

@KeithHall : Good call! Updated : )

Саша Черных Over a year ago

@KeithHall where can I read about all scopes for HTML/CSS/JS apart from source.css.embedded.html, meta.attribute-with-value.style.html source.css, text.html, supported by Sublime Text 3? Thanks!

Keith Hall Over a year ago

@СашаЧерных currently there is no documentation about scopes. You can use a package like ScopeHunter to find out what scopes are used in specific places in your documents.

Pᴇʜ · Accepted Answer · 2016-04-21 08:12:25Z

1

You can add language specific sublime-settings (e.g js.sublime-settings) into Sublime Text 3/Data/Packages/User and define a completely different color scheme for this language (js).

{
    "color_scheme": "my_js_specific_theme.tmTheme",
}

or you can try the following in your .tmTheme:

<dict>
    <key>scope</key>
    <string>source.js</string>
    <key>settings</key>
    <dict>
        <key>background</key>
        <string>#000000</string>
    </dict>
</dict>

Replace #000000 with your color code of course.

answered Apr 21, 2016 at 8:12

Pᴇʜ

57.9k10 gold badges55 silver badges75 bronze badges

Collectives™ on Stack Overflow

Different highlight JS and CSS in Sublime Text 3

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related