Sublime Text 3 中不同的高亮 JS 和 CSS

Question

我知道如何更改 javascript 和 CSS 的突出显示颜色。我将 tm.Theme 文件添加到 <array></array> 这个字符串之间：

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

结果：

但是如何把JS的背景和CSS做成各种更方便在小地图上导航呢？例如：

JS — 蓝色

CSS — 绿色

谢谢。

Answer 1

您可以将特定于语言的 sublime 设置（例如 js.sublime-settings）添加到 Sublime Text 3/Data/Packages/User 中，并为该语言（js）定义完全不同的配色方案。

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

或者您可以在 .tmTheme 中尝试以下操作：

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

当然要用你的颜色代码替换#000000。

Answer 2

在您的 tmTheme 文件中包含以下代码以处理混合的 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>

如评论中@KeithHall所述，范围的使用：

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

将允许您将这些自定义背景颜色应用到 HTML 语法而不影响 CSS 和 JS 语法。

Sublime Text 3 中不同的高亮 JS 和 CSS

Different highlight JS and CSS in Sublime Text 3

sublimetext3

sublimetext