修改Sublime Text中HTML标签的语法高亮显示

3
我曾经为Sublime Text 2尝试过多种配色方案,其中有些适用于javascript和php,但在HTML中它们将文本和标签的区别表现得非常差。

我想要的是使HTML标签与开始和结束标记(<>)的颜色相同。现在左右尖括号的颜色与纯文本相同,这很容易读错。

Bad syntax colouring in "Frontier" 配色方案 Frontier

意识到这不是配色方案而是HTML语法定义,我查看了~/Library/Application Support/Sublime Text 2/Packages/HTML/HTML.tmLanguage进行修改。

问题是,XML文件中充斥着&gt;&lt;,并且没有文件本身的文档说明,除了语法定义的非官方文档之外。是否有人知道如何将开始和结束标记定义合并为与标记本身相同的颜色?

当然,另一种选择是编辑我喜欢的每个主题,确保标签和尖括号颜色相同,但我认为在我的情况下全局编辑更有意义。

Better syntax highlighting in "Phoenix Dark Blue" 配色方案 Phoenix Dark Blue

例如,Phoenix Dark Blue通过以下定义解决了这个问题:

<dict>
    <key>name</key>
    <string>Variable, String Link, Tag Name</string>
    <key>scope</key>
    <string>variable, support.other.variable, string.other.link, entity.name.tag, entity.other.attribute-name, meta.tag, declaration.tag</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#787878</string>
    </dict>
</dict>
2个回答

5

如果有进一步的与.tmLanguage相关的紧急情况,请注意TextMate手册语言语法部分。他们的示例是使用JSON格式编写的:这是一种比PLIST更易读的格式,但Sublime Text无法完全利用它。ST2和ST3用户可以使用PackageDevYAML中编辑语法。

正如你所提到的,并由我的正则表达式搜索&(g|l)t;确认,Sublime Text 2 (build 2221)的HTML.tmLanguage语法文件中有太多的<>标签分隔符。一些HTML标签和古怪的正则表达式标记上下文是如此特殊以至于它们需要一个独特的表示,而对我们来说,不幸的是这包括重新指定标记分隔符<>的范围和上下文,而不是连接到某个通用的不等号符号范围选择器。 幸运的是,每个&lt;&gt;实例都被赋予了punctuation.definition.tag.???.html的范围名称,其中???可以是beginend或没有。同样,每个HTML标签(如<html>中的html)被命名为类似于entity.name.tag.html的东西。感谢幸运之神,现在是正则表达式的时候了!
在您的 HTML.tmLanguage 文件中 - 我建议为了安全起见,将其克隆到 Packages/User 中,尽管您需要重命名文件和语法 - 使用正则表达式搜索所有有问题的作用域名称:
punctuation\.definition\.tag.*(?=</string>)

...并替换每个结果(这应该只需简单的Ctrl+V)与标签本身相同名称的entity.name.tag.html。在我的测试中,我还添加了一个子范围,以便在稍后需要查找替换时,它看起来像这样:

entity.name.tag.delimiter.html

我已经使用ST2的默认配色方案进行了测试,并且它应该可以与其他良好编写的主题一起使用。这是使用Dayle Rees' Frontier的效果:

Frontier

它甚至可以在Sublime Text 3中使用!


0

据我所知,ST2已不再受支持(或运行)。以下是一个快速的ST3解决方案。

要自定义“标签”尖括号的颜色,您必须为标签活动创建一个dict范围,其中包含前景键和颜色字符串。以下是正确的语法。

<dict>
<key>name</key>
<string>tag</string>
<key>scope</key>
<string>entity.name.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#CCCCAA</string> <!-- custom tag color here -->
</dict>
</dict>

这个范围在这里有解释。

更多要探索的范围在这里


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接