Sublime Forum

Code coloring for html tags like TABLE and INPUT

#5

Thanks for the reply Orlmente. Is the language definition in the theme itself? Any idea how to create these specific scopes? The thing is that I haven’t actually found a theme with this kind of colour highlighting, otherwise I could just follow their example.

0 Likes

#6

Well, language definitions are *.tmLanguage files that you can find into package folders, for example, if you take a look into HTML package you can find the one for html language.
At the following links you can find more info about tmLanguage files:
sublime-text-unofficial-documen … xdefs.html
sublime-text-unofficial-documen … xdefs.html

0 Likes

#7

I appreciate the reading material Orlmente. That’s a lot to take in and make sense of though.

Can anyone tell me if it is even possible to apply unique colors to the tags we’re talking about here, such as: table, tr, td, img, form, field, input, button, header, footer, nav, etc.?

If it is possible can you please give me an example or two? I can’t find any, in any existing themes. I can’t believe I’m the only one that wants to make IMG tags stand out.

Thanks.

0 Likes

#8

i think Orlmente’s answer is good
and i am trying XD

(
i already try to use Syntax Definitions
it’s work !!
but … sublime-text-unofficial-documen … xdefs.html
Additionally, Sublime Text also understands the hidden-tmLanguage extension,
which can not be selected by the user but only by set by plugins.
“Find in Files” makes use of this.
The downsite is that these can not be included by import statements in other language definitions.
)

====================================

i had edit the Packages\HTML file and fix the color
Color Scheme need match Scope
you can install

ScopeAlways or ScopeHunter (use Package Control)

====================================

Color Scheme you need add a dict
when sublime find the Scope , sublime will follow your setting

<dict>
	<key>name</key>
	<string>you can input a name , like HTML Tag Table</string>
	<key>scope</key>
	<string>you can setting a Scope , like meta.tag.table.html</string>
	<key>settings</key>
	<dict>
		<key>fontStyle</key>
		<string></string>
		<key>foreground</key>
		<string>#009999</string>
	</dict>
</dict>

====================================

but … sublime Scope about HTML tag
default 2
meta.tag.block.any.html
meta.tag.inline.any.html

so you need add new Scope “Packages\HTML\HTML.tmLanguage”

<dict>
	<key>begin</key>
	<string>(&lt;/?)((?i:table|thead|tbody|tfoot|tr|th|td)\b)</string>
	<key>beginCaptures</key>
	<dict>
		<key>1</key>
		<dict>
			<key>name</key>
			<string>punctuation.definition.tag.table.begin.html</string>
		</dict>
		<key>2</key>
		<dict>
			<key>name</key>
			<string>entity.name.tag.table.html</string>
		</dict>
	</dict>
	<key>end</key>
	<string>(&gt;)</string>
	<key>endCaptures</key>
	<dict>
		<key>1</key>
		<dict>
			<key>name</key>
			<string>punctuation.definition.tag.table.end.html</string>
		</dict>
	</dict>
	<key>name</key>
	<string>meta.tag.table.html</string>
	<key>patterns</key>
	<array>
		<dict>
			<key>include</key>
			<string>#tag-stuff</string>
		</dict>
	</array>
</dict>

http://114.34.79.88/2013-11-15_232052.jpg

sorry my english not good
i hope you can understand

0 Likes

#9

A wealth of information Jelly, thank you very much. Although I’m still struggling to understand adding various scopes to “Packages\HTML\HTML.tmLanguage”, I have managed to hack together colouring the various tags I wanted to colour in Sublime Text 2.

If I wanted to do the same thing in Sublime Text 3, how would I do that? “Packages\HTML\HTML.tmLanguage” doesn’t exist in ST3. I tried adding it, but nothing happened. Where do you scope additional HTML tags in ST3?

0 Likes

#10

Anyone know the answer to the last question about scoping HTML tags in Sublime Text 3?

Thanks!

0 Likes

#11

Anyone?

0 Likes

#12

For OS X they’re in Application/Sublime \Text/Contents/MacOS/Packages/*.sublime-package

From there you need to rename to *.zip and them you can open them up.

0 Likes

#13

Thanks for that. I’m using Windows, but the instructions were the same. Named the file HTML.sublime-package file with .zip and then extracted it and low and behold there is the HTML.tmLanguage file.

I added my definitions the same as I did in Sublime Text 2, saved it, but nothing happened, the syntax coloring is’t working. I put an underscore in front of the HTML.sublime-package file and tried again, this time getting an error when I tried to open an HTML file:

Error loading syntax file “Packages/HTML/HTML.tmLanguage”: Unable to open Packages/HTML.tmLanguage

Not sure what to do here. Do I need to recompile my changes back into the HTML.sublime-package file? Or? What am I missing here?

0 Likes

#14

I tried adding the modified HTML.tmLanguage file back to the HTML.sublime-package.zip file and then removed the .zip and it loads fine now, but my colors aren’t being applied :frowning:

The scope for the tags using ScopeHunter looks the same in Sublime 3 as it does in 2 so I’m completely lost as to why it’s not working.

So much agro for something that should be so simple.

0 Likes

#15

Anyone know how to get this working? I’m trying to uniquely colour IMG, FORM and TABLE tags in Sublime Text 3 but the same technique I used successfully in Sublime 2 isn’t working.

As always, any help would be greatly appreciated!

0 Likes

#16

ST3 still beta , i dont like beta , in my work XD
so ~ sorry , i can not help you

but …

in ST3
Sublime Text 3/Packages/HTML.sublime-package
you can open it , use the zip app like 7-zip

then you can see the “HTML.tmLanguage”

but i am not sure , we can change this XD
so good luck

XD

0 Likes

#17

Yeah, I did that as I described above, but no love. It just doesn’t work. Is it a bug? A beta issue? Kind of strange. I really would like to use 3 for the added features, but I’m quite happy with, and have got used to, my syntax colouring in 2, so I’m conflicted. I just really wish I could get this working.

0 Likes

#18

If you create a file with the same name, and the same package in the Packages directory, it’ll override the sublime-package file. I wrote github.com/skuroda/PackageResourceViewer to assist with the tasks. Simply use the plugin to open the file, make your changes, and save. It’ll place the file in the proper location to override the existing file.

0 Likes

#19

I really need to check back here more often. Thanks for the info skuroda. I’ll give it a try.

0 Likes

#20

Still not working for me. This is the code I have in my HTML.tmLanguage file to define the scope for adding custom colours to img, form and table tags…

<dict>
			<key>begin</key>
			<string>(&lt;/?)((?i:table|thead|tbody|tfoot|tr|th|td)\b)</string>
			<key>beginCaptures</key>
			<dict>
				<key>1</key>
				<dict>
					<key>name</key>
					<string>punctuation.definition.tag.table.begin.html</string>
				</dict>
				<key>2</key>
				<dict>
					<key>name</key>
					<string>entity.name.tag.table.html</string>
				</dict>
			</dict>
			<key>end</key>
			<string>(&gt;)</string>
			<key>endCaptures</key>
			<dict>
				<key>1</key>
				<dict>
					<key>name</key>
					<string>punctuation.definition.tag.table.end.html</string>
				</dict>
			</dict>
			<key>name</key>
			<string>meta.tag.table.html</string>
			<key>patterns</key>
			<array>
				<dict>
					<key>include</key>
					<string>#tag-stuff</string>
				</dict>
			</array>
		</dict>

		<dict>
			<key>begin</key>
			<string>(&lt;/?)((?i:img)\b)</string>
			<key>beginCaptures</key>
			<dict>
				<key>1</key>
				<dict>
					<key>name</key>
					<string>punctuation.definition.tag.img.begin.html</string>
				</dict>
				<key>2</key>
				<dict>
					<key>name</key>
					<string>entity.name.tag.img.html</string>
				</dict>
			</dict>
			<key>end</key>
			<string>(&gt;)</string>
			<key>endCaptures</key>
			<dict>
				<key>1</key>
				<dict>
					<key>name</key>
					<string>punctuation.definition.tag.img.end.html</string>
				</dict>
			</dict>
			<key>name</key>
			<string>meta.tag.img.html</string>
			<key>patterns</key>
			<array>
				<dict>
					<key>include</key>
					<string>#tag-stuff</string>
				</dict>
			</array>
		</dict>

		<dict>
			<key>begin</key>
			<string>(&lt;/?)((?i:form|fieldset|legend|label|input|textarea)\b)</string>
			<key>beginCaptures</key>
			<dict>
				<key>1</key>
				<dict>
					<key>name</key>
					<string>punctuation.definition.tag.form.begin.html</string>
				</dict>
				<key>2</key>
				<dict>
					<key>name</key>
					<string>entity.name.tag.form.html</string>
				</dict>
			</dict>
			<key>end</key>
			<string>(&gt;)</string>
			<key>endCaptures</key>
			<dict>
				<key>1</key>
				<dict>
					<key>name</key>
					<string>punctuation.definition.tag.form.end.html</string>
				</dict>
			</dict>
			<key>name</key>
			<string>meta.tag.form.html</string>
			<key>patterns</key>
			<array>
				<dict>
					<key>include</key>
					<string>#tag-stuff</string>
				</dict>
			</array>
		</dict>

And this is in my theme for defining the colours…

		<dict>
			<key>name</key>
			<string>HTML Tag Table</string>
			<key>scope</key>
			<string>meta.tag.table.html</string>
			<key>settings</key>
			<dict>
				<key>fontStyle</key>
				<string></string>
				<key>foreground</key>
				<string>#839400</string>
			</dict>
		</dict>

		<dict>
			<key>name</key>
			<string>HTML Tag Table</string>
			<key>scope</key>
			<string>meta.tag.table.html entity.name.tag.table.html</string>
			<key>settings</key>
			<dict>
				<key>fontStyle</key>
				<string></string>
				<key>foreground</key>
				<string>#839400</string>
			</dict>
		</dict>

		<dict>
			<key>name</key>
			<string>HTML Tag IMG</string>
			<key>scope</key>
			<string>meta.tag.img.html</string>
			<key>settings</key>
			<dict>
				<key>fontStyle</key>
				<string></string>
				<key>foreground</key>
				<string>#B64C77</string>
			</dict>
		</dict>

		<dict>
			<key>name</key>
			<string>HTML Tag IMG</string>
			<key>scope</key>
			<string>meta.tag.img.html entity.name.tag.img.html</string>
			<key>settings</key>
			<dict>
				<key>fontStyle</key>
				<string></string>
				<key>foreground</key>
				<string>#B64C77</string>
			</dict>
		</dict>

		<dict>
			<key>name</key>
			<string>HTML Tag IMG</string>
			<key>scope</key>
			<string>meta.tag.img.html entity.other.attribute-name.html</string>
			<key>settings</key>
			<dict>
				<key>fontStyle</key>
				<string></string>
				<key>foreground</key>
				<string>#B64C77</string>
			</dict>
		</dict>

		<dict>
			<key>name</key>
			<string>HTML Tag Form</string>
			<key>scope</key>
			<string>meta.tag.form.html</string>
			<key>settings</key>
			<dict>
				<key>fontStyle</key>
				<string></string>
				<key>foreground</key>
				<string>#69B2C2</string>
			</dict>
		</dict>

		<dict>
			<key>name</key>
			<string>HTML Tag Form</string>
			<key>scope</key>
			<string>meta.tag.form.html entity.name.tag.form.html</string>
			<key>settings</key>
			<dict>
				<key>fontStyle</key>
				<string></string>
				<key>foreground</key>
				<string>#69B2C2</string>
			</dict>
		</dict>

		<dict>
			<key>name</key>
			<string>HTML Tag Form</string>
			<key>scope</key>
			<string>meta.tag.form.html entity.other.attribute-name.html</string>
			<key>settings</key>
			<dict>
				<key>fontStyle</key>
				<string></string>
				<key>foreground</key>
				<string>#69B2C2</string>
			</dict>
		</dict>

		<dict>
			<key>name</key>
			<string>HTML Tag Form</string>
			<key>scope</key>
			<string>meta.tag.form.html meta.attribute-with-value.id.html entity.other.attribute-name.id.html</string>
			<key>settings</key>
			<dict>
				<key>fontStyle</key>
				<string></string>
				<key>foreground</key>
				<string>#69B2C2</string>
			</dict>
		</dict>

This works fine in ST2, but has no effect in ST3.

0 Likes

#21

Anyone know how to get custom colouring working in ST3? I’ve done the exact same thing as I have done in ST2 but it’s not working.

0 Likes

#22

Syntax definitions and color schemes work exactly the same way as they did in ST2. The only difference is how packages are handled.

Check github.com/skuroda/PackageResourceViewer to extract the files to the right locations. You should be able to use that plugin and just save the file when you are done and it should have the correct name (and folders are automatically created). Remember that you need to do this with both the syntax definition and the color scheme - and a restart won’t hurt. You can test if the syntax definition works by inspecting the scope of the tag in question. If it’s working as expected, chances are you did something wrong with the color scheme.

0 Likes

#23

colorcoder does color each html tag in a different color

0 Likes

#24

[quote=“FichteFoll”]Syntax definitions and color schemes work exactly the same way as they did in ST2. The only difference is how packages are handled.

Check github.com/skuroda/PackageResourceViewer to extract the files to the right locations. You should be able to use that plugin and just save the file when you are done and it should have the correct name (and folders are automatically created). Remember that you need to do this with both the syntax definition and the color scheme - and a restart won’t hurt. You can test if the syntax definition works by inspecting the scope of the tag in question. If it’s working as expected, chances are you did something wrong with the color scheme.[/quote]

As I said in my previous post, I’ve done exactly this. I used PackageResourceViewer to open the HTML package and to edit HTML.tmLanguage, add the code that I previously posted, which works perfectly in ST2, saved it, restarted, nothing happens. I’m using the exact same color scheme for both ST2 and ST3 which has these new colors defined.

ST-2

http://www.resdivina.com/img/st2-colors.png

ST-3

http://www.resdivina.com/img/st3-colors.png

I want to specifically change just a couple of HTML tags in my scheme. I do not want to apply a rainbow of colors and wholesale changes to my theme (including backgrounds, line numbers, tab indicators, etc.) so it no longer looks even remotely the same.

0 Likes