Sublime Forum

Code coloring for html tags like TABLE and INPUT

#1

Hi,

I’m using a color scheme that have custom colors for the table and input tags, colors that are different from the other html tags like div. But my issue is: these tags that have different color are not coloring different they are using the same colors of the rest of the tags.

What can I do to correct this problem?

In the attachment will be the color scheme file.

Thx a lot.

Bruno Cavenaghi

0 Likes

#2

I see the response to your question has been overwhelming.

I’d like to add IMG to the list, along with a bunch of others.

Does anyone know how to get individual HTML tag types to be coloured differently? Any help would be greatly appreciated.

0 Likes

#3

Really trying to get an answer on this one.

Does anyone know if there’s a way to colour individual HTML tags in your theme? I’d like different colours for IMG, TABLE, FORM, INPUT, etc. but everything I’ve tried doesn’t seem to work.

0 Likes

#4

I think, for what I understood about colour-schemes, that you have to edit the language definition in order to create specific scopes, and then create the colour rules for the new created scopes in your colour-scheme.

0 Likes

#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