Modifiying Sublime Text Syntax Highlighting for HTML Tags

StackOverflow https://stackoverflow.com/questions/20822408

문제

I've tried numerous colour schemes for Sublime Text 2 and I've found a number that look great for javascript and php, but they also have terrible distinction between text and tags in HTML.

What I'm looking to do is make HTML tags the same colour as the beginning and end tag (<>). Right now the left and right chevrons appear the same colour as plain text, which can be dizzying to read.

Bad syntax colouring in "Frontier" Colour scheme Frontier

Realizing it's not the colour scheme but the syntax definitions for HTML, I looked in ~/Library/Application Support/Sublime Text 2/Packages/HTML/HTML.tmLanguage to make the modification.

Problem is, the XML file is littered with &gt; and &lt; and no documentation for the file itself other than the unofficial documentation for syntax definitions. Anyone know how I could merge the beginning and end tag definitions to be the same as the tags themselves?

The other option, of course, it to edit each theme I like and make sure the tags and the chrevrons are coloured the same, but I figured a global edit would make more sense in my case.

Better syntax highlighting in "Phoenix Dark Blue" Colour scheme Phoenix Dark Blue

For example, Phoenix Dark Blue solves this problem by using the following definition,

<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>
도움이 되었습니까?

해결책

In case of further .tmLanguage-related emergencies, take note of the TextMate Manual's Language Grammars section. Their examples are in JSON: a format infinitely more readable than PLIST but not a thing that Sublime Text can properly utilize. ST2 and ST3 users can use PackageDev to edit grammars in YAML.

As you've mentioned, and as confirmed by my regex search &(g|l)t;, there are way too many < or > tag delimiters within the Sublime Text 2 (build 2221) HTML.tmLanguage grammar file. Some HTML tags and wacky regex tag contexts are so special that they warrant a unique denotation, which unfortunately for us includes re-specifying the scope and context of the tag delimiters, < and >, rather than hooking in to some universal inequality symbol scope selector.

Luckily, every instance of &lt; and &gt; is given a scope name of punctuation.definition.tag.???.html, where ??? could be begin, end, or nothing. Likewise, each HTML tag (html in <html>) is named quite a lot like entity.name.tag.html. Fortune be praised, it's time for regular expressions!

In your HTML.tmLanguage file – I'd actually suggest cloning a new one into Packages/User for safety's sake, although you'll have to rename the file and the grammar – perform a regex search for all offending scope names with:

punctuation\.definition\.tag.*(?=</string>)

…and replace every result (this should be as simple as one Ctrl+V) with the same name as the tags themselves, entity.name.tag.html. In my testing I also added another sub-scope past tag in case I needed to find the replacements later, so it looked like this:

entity.name.tag.delimiter.html

I've tested this with ST2's default color schemes, and it should work with other well-written themes. Here it is with Dayle Rees' Frontier:

Frontier

It even works in Sublime Text 3!

다른 팁

ST2 is no longer supported (or running, as far as I know). Here is a quick ST3 solution.

To customize colors of 'tag' angle brackets, you must create a dict scope for tag activity, with foreground key and color string. Here is the correct syntax.

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

This scope is explained here.

More scopes to explore here.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top