95

我想在 Sublime 2/3 中更改/添加语言的语法突出显示。

例如，我想要this在 JavaScript 中着色的关键字。

我怎样才能做到这一点？

我知道其中有一个偏好 JavaScript 文件C:\Program Files\Sublime Text 3\Packages，但我不知道要更改什么，或者我是否必须在此文件夹的某处创建一个新的 JavaScript 偏好文件%APPDATA%\Sublime Text 3。

4

5 回答 5

95

语法突出显示由您使用的主题控制，可通过Preferences -> Color Scheme. .tmLanguage主题通过使用范围来突出显示不同的关键字、函数、变量等，范围由语言目录/包中的文件中包含的一系列正则表达式定义。例如，JavaScript.tmLanguage文件将范围source.js和关键字分配variable.language.js给this关键字。由于 Sublime Text 3 使用.sublime-packagezip 文件格式来存储所有默认设置，因此编辑单个文件并不是很简单。

不幸的是，并非所有主题都包含所有范围，因此您需要尝试不同的主题才能找到看起来不错的主题，并为您提供所需的突出显示。Sublime Text 中包含许多主题，并且可以通过Package Control获得更多主题，如果您还没有安装，我强烈建议您安装。确保您遵循ST3 的指示。

碰巧的是，我开发了Neon Color Scheme可以通过 Package Control 获得的 ，您可能想看看。我的主要目标，除了试图使广泛的语言看起来尽可能好之外，是尽可能多地识别不同的范围——比标准主题中包含的范围要多得多。例如，虽然 JavaScript 语言的定义不如 Python 的那么全面，Neon但仍然比某些默认值（如Monokai或Solarized.

以霓虹灯主题突出显示的 jQuery

我应该注意，我Better JavaScript为这张图片使用了@int3h 的语言定义，而不是 Sublime 附带的语言定义。它可以通过包控制安装。

更新

最近我发现了另一种 JavaScript 替代语言定义 - JavaScriptNext - ES6 Syntax. 它比基础 JavaScript 甚至更好的 JavaScript 拥有更多的作用域。在相同的代码上看起来像这样：

JavaScript下一个

此外，由于我最初写了这个答案，@skuroda 已经PackageResourceViewer通过包控制发布。它允许您无缝地查看、编辑和/或提取部分或整个.sublime-package包。因此，如果您选择，您可以直接编辑 Sublime 包含的配色方案。

另一个更新

随着Github上几乎所有默认软件包的发布，变化迅速而激烈。旧的 JS 语法已被完全重写，以包含 JavaScript Next ES6 语法的最佳部分，现在尽可能完全兼容 ES6。已经进行了大量其他更改以涵盖角落和边缘情况，提高一致性，并使其整体变得更好。新语法已包含在（此时）最新的开发版本3111 中。

如果您想在当前beta 版本3103 中使用任何新语法，只需在某个地方克隆 Github 存储库并将JavaScript（或您想要的任何语言）链接到您的Packages目录 - 通过选择在您的系统上找到它Preferences -> Browse Packages...。然后，只需git pull在原始 repo 目录中不时刷新任何更改，即可享受最新最好的！我应该注意，repo 使用新.sublime-syntax格式而不是旧格式.tmLanguage，因此它们不适用于 3084 之前的 ST3 版本或 ST2（在这两种情况下，您都应该升级到最新的 beta 或 dev 版本）。

我目前正在调整我的 Neon 颜色方案以处理新 JS 语法中的所有新范围，但大多数应该已经涵盖。

于 2013-08-06T03:30:13.240 回答
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>。

于 2013-08-06T22:21:41.157 回答
17

使用通过 Package Control 安装的PackageResourceViewer插件（如MattDMo 所述）。这允许您通过简单地在 Sublime Text 中打开它并保存文件来覆盖压缩资源。它只会自动将编辑过的资源保存到 %APPDATA%/Roaming/Sublime Text 3/Packages/ 或 ~/.config/sublime-text-3/Packages/。

具体到op，安装插件后，执行PackageResourceViewer: Open Resource命令。然后选择JavaScript后跟JavaScript.tmLanguage。这将在编辑器中打开一个 xml 文件。您可以编辑任何语言定义并保存文件。这将在用户目录中写入 JavaScript.tmLanguage 文件的覆盖副本。

可以使用相同的方法来编辑系统中任何语言的语言定义。

于 2014-02-04T03:46:44.683 回答
5

“this”已经在 J​​avascript 中着色。

查看-> 语法-> 并选择要突出显示的语言。

于 2017-10-10T09:03:22.623 回答
1

这是我的食谱

注意：这并不是 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 Explorer中浏览到该路径，则 [ 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 = 色相、饱和度、亮度、alpha rgba = 红色、绿色、蓝色、alpha

hsla(151, 100%, 41%, 1) - 最后一个参数是 alpha 级别（透明度） 1 = 不透明，0.5 = 半透明，0 = 全透明

hsl(151, 100%, 41%) - 没有 Alpha 通道

rgba(0, 209, 108, 1) - 带有 Alpha 通道的 rgb

rgb(0, 209, 108) - 没有 Alpha 通道

于 2020-04-13T19:16:26.197 回答